Auto open tree node during drag and drop operation

In flex   October 4, 2006 - 12:57 pm

Recently one of the project I’m working requires this feature, during a drag and drop operation, when user drag the item over and stay on top of one node in the Tree component for a second or two, that node will be automatically opened, just like those found in Windows Explorer or Outlook.

It sounds easy but actually not, it’s part of the huge revision we did on Tree component, another interesting thing to note is when dragging the item over one node, that node’s background is highlighted, instead of the flex-standard-drag-over behavior: showing a cross-line on top or bottom of the node.

By providing this drag-over-highlight, user got a feeling of s/he is actually dropping the item “into” that node, instead of on top or below that node, small things but have huge impact on user experience, I would really love to see this be integrated into the framework code someday.

Back to the auto open thing, ended up we totally rewrote the logic inside Tree.showDropFeedBack() and calculate which item is rollovered then see if we need to open it or not.

It’s always fun hacking the framework code and achieve things like this :-)

by admin

1 Comment Add your own

  • 1. Georgi&hellip  |  November 28th, 2007 at 11:35 pm

    public function openBranch(event:DragEvent):void{
    var dropTarget:Tree = Tree(event.currentTarget);
    var r:int = dropTarget.calculateDropIndex(event);
    var selectednode:Object = BookTree.selectedItem;
    BookTree.selectedIndex = r;
    dropTarget.expandItem(BookTree.selectedItem, true, true);
    BookTree.selectedIndex = -1;
    BookTree.selectedItem = selectednode;
    }

留言回應

hidden

您的留言會先經過站長認証後才刊登在網站上。
your comments will be approved by Administrator before appearing on the page.

Trackback this post  |  Subscribe to the comments via RSS Feed

mobile phone