How to drop something into a flex tree item?

Question

I just read a comment at FlexExamples:

One thing to note about the tree is that it is really just a list in which items are displayed. What that means is, you can’t really drop somthing “into” folder unless the folder is open. Even in that case the user experience isn’t quite right. So try moving everything out of one of the folders and then collapse that empty folder. If you drop something “on” the folder, it actually winds up between the target folder and the one below or above. This is indicated by the black line showing up as you move the mouse over the folders. If you “open” the folder (the only way to tell it is open is by the arrow) and then try it, you end up with an additional drop zone that is basically the bottom half of the opened, empty folder. This is also indicated by the black lines position.

It would be better if the middle section of any item could always be the drop zone for “add to this folder” and the top and bottom edges could be for dropping above or below respectively.

I've just come to the same problem. Has somebody already managed this problem? In my case, I have dragMoveEnabled in the tree and offer the ability of dragging the tree items. But it is impossible to drag an item into another item that is empty. You can only drop the dragged item above or underneath an empty item.

Answer 1

I've handled the problem as followed:

• In the dragOver event handler: start a timer to determine how long the user has dragged the item over the current item
• if the current item has no childs, add a new child with the title "drop item here"
• remove the the added child after the item has been dropped (in the dragComplete handler) or the user moved the dragged item away from the current item (in the dragOver handler)

Answer 2

This is what I'm doing as of now:

var i:IListItemRenderer = (event.currentTarget as Tree).indexToItemRenderer((event.currentTarget as Tree).calculateDropIndex(event));
var x:XML = XML(i.data);
if (x.children().length() == 0 && x.@title != 'Drop Node Here')
   x.appendChild("<node title='Drop Node Here' />");

I have to get the tree that way because my trees are built dynamically. But anyway, that adds a node to any node that doesn't have a child, and will only add a single node. Now I just have to set up a timer so that it only happens if you hover over the node for a second.

Answer 3

I do it like this:

protected function onDragOver(event:DragEvent):void {
    event.preventDefault();
    event.currentTarget.hideDropFeedback(event);                

    try {
        var index:int = tree.calculateDropIndex(event);
    } catch(e:Error) {
        DragManager.showFeedback(DragManager.NONE);
        return;
    }

    tree.selectedIndex = index;

    var draggedOverItem:Object = tree.selectedItem;
}

Perhaps there is even a better way than setting the selectedIndex and using the selectedItem?