Dragging(Drag & Drop) from a Tree to a List/TileList – DragManager

In the Flex framework, we have made dragging and dropping within various List components fairly trivial. Assuming that your data is similar, you simply need to add dragEnabled=true to your source and then dropEnabled=false for your destination. However, the one exception in this case is Tree. By default, you cannot drag any items from any other drag enabled List component (other than another tree). If you look at the source of the framework, you will see that all of the event handlers used for TileList, List, HorizontalList and DataGrid are in ListBase.as. However, Tree has its own custom drag event handlers. Therefore, if you want to share data between another List component and a Tree using drag and drop, you will need to override all of the drag event handlers. These handlers include dragEnter, dragDrop, dragComplete and dragOver. Here is an example Application where you can drag items from a Tree to a TileList. The items will be removed from the Tree.

<?xml version="1.0" encoding="iso-8859-1" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        width="600" height="600"
        creationComplete="initApp()">

<mx:Script>
    <![CDATA[

    import mx.events.DragEvent;
    import mx.managers.DragManager;
    import mx.core.DragSource;
    import mx.core.mx_internal;
    import mx.managers.DragManager;
    import mx.collections.*;

    public function initApp():void {
        srcTileList.dataProvider = ["Jane"];
        destTree.dataProvider = treeDP;
    }

    public function doDragOver(event:DragEvent) : void
	{
	    event.preventDefault();

	    DragManager.showFeedback(event.ctrlKey ? DragManager.COPY : DragManager.MOVE);
	    TileList(event.target).showDropFeedback(event);
    }

    public function doDragEnter(event:DragEvent): void
    {
        event.preventDefault();

        DragManager.acceptDragDrop(TileList(event.target));
		DragManager.showFeedback(event.ctrlKey ? DragManager.COPY : DragManager.MOVE);
		TileList(event.target).showDropFeedback(event);
    }

    public function doDragDrop(event:DragEvent): void
    {
        event.preventDefault();
	    var myTileList:TileList = TileList(event.target);
	    myTileList.hideDropFeedback(event);

	    if (event.dragSource.hasFormat("treeItems"))
	    {
	        if (!myTileList.dataProvider)
	           // Create an empty collection to drop items into.
	           myTileList.dataProvider = [];

	        var items:Array = event.dragSource.dataForFormat("treeItems") as Array;
	        for (var i:int = items.length - 1; i >= 0; i--)
	        {
	           myTileList.dataProvider.addItemAt(String(items[i].@label), TileList(event.target).calculateDropIndex(event));
	        }
	    }
    }

    public function doDragComplete(event:DragEvent): void
    {
        event.preventDefault();
        if (event.action == DragManager.MOVE && Tree(event.target).dragMoveEnabled)
	    {
	        var target:Tree = Tree(event.target)
	        if (event.relatedObject != this)
	        {
	            //if we dropped on another component
	            //then we need to remove from ourself first
	            var items:Array = event.dragSource.dataForFormat("treeItems") as Array;
	            var parent:*;
	            var index:int;

	            //do the remove
	            for (var i:int=0; i<items.length; i++)
	            {
	                parent = target.getParentItem(items[i]);
	                index = getChildIndexInParent(parent, items[i], target);
	                target.mx_internal::removeChildItem(parent, items[i], index);
	             }
	         }
	    }
    }

    private function getChildIndexInParent(parent:Object, child:Object, target:Tree):int
	{
	    var index:int = 0;
	    if (!parent)
	    {
	        var cursor:IViewCursor = ICollectionView(target.dataProvider).createCursor();
	        while (!cursor.afterLast)
	        {
	            if (child === cursor.current)
	                break;
	            index++;
	            cursor.moveNext();
	        }
	    }
	    else
	    {
	        if (parent != null && target.dataDescriptor.isBranch(parent) &&
	            target.dataDescriptor.hasChildren(parent))
	        {
	            var children:ICollectionView = target.dataDescriptor.getChildren(parent);
	            if (children.contains(child))
	            {
	                for (; index < children.length; index++)
	                {
	                   if (child === children[index])
	                   break;
	                }
	            }
	         }
	    }
	    return index;
	}

]]>
</mx:Script>

<mx:XML id="treeDP" format="e4x">
   <rootnode>
        <node label="Mail">
            <node label="Inbox"/>
            <node label="Personal Folder">
                <node label="Demo" isBranch="true" />
                <node label="Personal" isBranch="true" />
                <node label="Saved Mail" isBranch="true" />
                <node label="bar" isBranch="true" />
            </node>
            <node label="Sent" isBranch="true" />
            <node label="Trash"/>
        </node>
        <node label="Calendar"/>
   </rootnode>
</mx:XML>

<mx:Label width="100%" text="Drag Tree items to the TileList" />

<mx:TileList id="srcTileList"
    dropEnabled="true"
    dragOver="doDragOver(event)"
    dragEnter="doDragEnter(event)"
    dragDrop="doDragDrop(event)"
    columnWidth="100" />

<mx:Tree id="destTree"
    dragEnabled="true"
    labelField="@label"
    showRoot="false"
    dragComplete="doDragComplete(event)"
    width="250" />

</mx:Application>