Find out which tree item has been dropped on to in Flex

Question

I have a mx.List and a mx.Tree. I'm trying to drag items from the list to the tree but instead of have them add to the actually tree itself I just want to find out what the dropTarget on the tree is. The dropTarget variable is always null.

protected function sparkTree_dragDropHandler(event:DragEvent):void
{
    var source:* = event.dragInitiator;
    var target:* = event.currentTarget;

    trace("Dragged......", source.selectedItem.label);
    trace("From.........", source.name);
    trace("To...........", event.currentTarget.name);
    trace("Target Item..", event.currentTarget.dropTarget);
}

Output:

Dragged...... itemOne
From......... _Main_Tree2
To........... _Main_Tree1
Target Item.. null

So just to clarify I'm trying to get the object that the items is being dropped onto.

---

As a side note using:

var source:List = event.dragInitiator as List;
var target:List = event.currentTarget as List;

resulted in null object reference error. Seems odd?

---

UPDATE:

(Not sure where the best place to post this is but) I think this may be the solution...

Create custom event: ItemDragEvent

package events
{
    import mx.core.DragSource;
    import mx.core.IUIComponent;
    import mx.events.DragEvent;

    public class ItemDragEvent extends DragEvent
    {
        public static const DRAG_DROP:String = "itemDragDrop";
        public static const DRAG_ENTER:String = "itemDragEnter";
        public static const DRAG_EXIT:String = "itemDragExit";

        public var item:Object;
        public var data:Object;
        public var index:Object;

        public function ItemDragEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=true, dragInitiator:IUIComponent=null, dragSource:DragSource=null, action:String=null, ctrlKey:Boolean=false, altKey:Boolean=false, shiftKey:Boolean=false)
        {
            super(type, bubbles, cancelable, dragInitiator, dragSource, action, ctrlKey, altKey, shiftKey);
        }
    }
}

Create an mx.Tree item renderer: TreeItemRenderer

<?xml version="1.0" encoding="utf-8"?>
<s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                  xmlns:s="library://ns.adobe.com/flex/spark" 
                  xmlns:mx="library://ns.adobe.com/flex/mx"
                  dragEnter="dragEnterHandler(event)"
                  dragExit="dragExitHandler(event)"
                  dragDrop="dragDropHandler(event)"
                  >

<fx:Script>
    <![CDATA[
        import events.ItemDragEvent;

        import mx.core.IUIComponent;
        import mx.events.DragEvent;
        import mx.managers.DragManager;


        protected function dragEnterHandler(event:DragEvent):void
        {
            DragManager.acceptDragDrop(event.currentTarget as IUIComponent);

            var e:ItemDragEvent = new ItemDragEvent(ItemDragEvent.DRAG_ENTER, true);
            e.data = data;
            e.item = data;
            e.index = itemIndex;
            dispatchEvent(e);   

            trace("TreeItemRenderer, dragEnterHandler");
        }

        protected function dragExitHandler(event:DragEvent):void
        {
            var e:ItemDragEvent = new ItemDragEvent(ItemDragEvent.DRAG_EXIT, true);
            e.data = data;
            e.item = data;
            e.index = itemIndex;
            dispatchEvent(e);

            trace("TreeItemRenderer, dragExitHandler");
        }

        protected function dragDropHandler(event:DragEvent):void
        {
            DragManager.acceptDragDrop(event.currentTarget as IUIComponent);

            var e:ItemDragEvent = new ItemDragEvent(ItemDragEvent.DRAG_DROP, true);
            e.data = data;
            e.item = data;
            e.index = itemIndex;
            dispatchEvent(e);

            trace("TreeItemRenderer, dragDropHandler");
        }

    ]]>
</fx:Script>

<s:states>
    <s:State name="normal" />            
    <s:State name="hovered" />
    <s:State name="selected" />
</s:states>
<s:HGroup left="0" right="0" top="0" bottom="0" verticalAlign="middle">
    <s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" />
        </s:fill>
    </s:Rect>
    <s:Group id="disclosureGroup">
        <s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" />
    </s:Group>
    <s:BitmapImage source="{treeListData.icon}" />
    <s:Label id="labelField" text="{treeListData.label}" paddingTop="2"/>
</s:HGroup>
</s:MXTreeItemRenderer>

Finally the Main code

</fx:Declarations>      

<fx:Script>
    <![CDATA[
        import events.ItemDragEvent;

        import itemRenderers.TreeItemRenderer;

        import mx.collections.ArrayCollection;
        import mx.events.DragEvent;
        import mx.events.FlexEvent;
        import mx.utils.ObjectUtil;

        [Bindable]
        private var listData:ArrayCollection  = new ArrayCollection([ "One", "Two", "Three" ]);
        [Bindable]
        private var treeData:Object = { label: "First", children: new ArrayCollection([ { label: "Second" }, { label: "Third" } ]) };

        protected function windowedapplication1_initializeHandler(event:FlexEvent):void
        {
            tree1.addEventListener(ItemDragEvent.DRAG_DROP, treeItemDragDropHandler);
        }

        protected function treeItemDragDropHandler(event:ItemDragEvent):void
        {
            event.preventDefault();
            trace("ItemDragDrop:", ObjectUtil.toString(event.data));
        }

    ]]>
</fx:Script>

<s:layout>
    <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
</s:layout>
<mx:Tree id="list1" width="50%" height="100%"
         dataProvider="{listData}" labelField="label"
         dragEnabled="true"
         dragMoveEnabled="true" 
         dropEnabled="true" />

<mx:Tree id="tree1" width="50%" height="100%" 
         dataProvider="{treeData}"
         dragEnabled="true"
         dropEnabled="true" 
         showRoot="true"
         itemRenderer="itemRenderers.TreeItemRenderer" />

Needs a bit of work to sort out visual feedback, but that should output the Tree item that was dropped onto.

Answer 1

In regards to

var source:List = event.dragInitiator as List;
var target:List = event.currentTarget as List;

Try to check your imports. Maybe there was imported Spark lists but you're using MX List? :)

In regards to dropTarget property please refer to documentation about it. It doesn't relate to Flex drag-n-drop functionality. And so there is no surprise the value of this property is null.

What about your problem in general you can use the following snippet which doesn't solve all the problems (I have no time to debug all the aspects) but can provide you some good starting point:

<?xml version="1.0" encoding="utf-8"?>
<s:Application minHeight="600" minWidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.collections.ICollectionView;
        import mx.events.DragEvent;
        import mx.managers.DragManager;

        [Bindable]
        private var listDataProvider:ArrayCollection = new ArrayCollection([ "First", "Second", "Third" ]);
        [Bindable]
        private var treeDataProvider:Object =
            { label: "First", children: new ArrayCollection([ { label: "Second" }, { label: "Third" } ]) };

        protected function list_dragCompleteHandler(event:DragEvent):void
        {
            if (event.relatedObject == tree)
            {
                event.preventDefault();
                if (event.action == DragManager.MOVE && list.dragMoveEnabled)
                {
                    var items:Array = event.dragSource.dataForFormat("items") as Array;
                    var collection:ArrayCollection = list.dataProvider as ArrayCollection;
                    for each (var item:Object in items)
                    {
                        if (collection.contains(item))
                            collection.removeItemAt(collection.getItemIndex(item));
                    }
                }
            }
        }

        protected function tree_dragDropHandler(event:DragEvent):void
        {
            var source:List = List(event.dragInitiator);
            var target:Tree = Tree(event.currentTarget);

            trace("Dragged......", source.selectedItem);
            trace("From.........", source.name);
            trace("To...........", target.name);
            event.preventDefault();
            tree.hideDropFeedback(event);
            var index:int = tree.calculateDropIndex(event);
            var items:Array = new Array();
            if (event.dragSource.hasFormat("treeItems"))
                items = items.concat(event.dragSource.dataForFormat("treeItems") as Array);
            if (event.dragSource.hasFormat("items"))
                items = items.concat(event.dragSource.dataForFormat("items") as Array);
            if (index > (tree.dataProvider as ICollectionView).length)
                index = (tree.dataProvider as ICollectionView).length;
            for each (var item:Object in items)
            {
                var obj:Object = new Object()
                obj.label = item;

                (tree.dataProvider as ArrayCollection).addItemAt(obj, index);

            }
        }

        protected function tree_dragEnterHandler(event:DragEvent):void
        {
            if (event.dragInitiator == list)
            {
                event.preventDefault();
                DragManager.acceptDragDrop(event.target as Tree);
                tree.showDropFeedback(event);
            }
        }

        protected function tree_dragExitHandler(event:DragEvent):void
        {
            event.preventDefault();
            tree.hideDropFeedback(event);
        }

        protected function tree_dragOverHandler(event:DragEvent):void
        {
            if (event.dragInitiator == list)
            {
                event.preventDefault();
                tree.showDropFeedback(event);
            }
        }
    ]]>
    </fx:Script>
    <s:layout>
        <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
    <mx:List dataProvider="{listDataProvider}" dragComplete="list_dragCompleteHandler(event)" dragEnabled="true"
        dragMoveEnabled="true" dropEnabled="true" id="list" width="200" />
    <mx:Tree dataProvider="{treeDataProvider}" dragDrop="tree_dragDropHandler(event)" dragEnabled="true"
        dragEnter="tree_dragEnterHandler(event)" dragExit="tree_dragExitHandler(event)"
        dragOver="tree_dragOverHandler(event)" dropEnabled="true" id="tree" showRoot="true" width="200" />
</s:Application>