Flex Tree Drag Drop

Question

I am working on the flex tree drag and drop functionality and i have couple of questions on it.

I have given a array collection as the data provider .Each branch(folder) and leaf(item) has a unique id.

the tree structure is some thing like this.

folder1.
      folder2.
            item1.
            item2.
            item3.
      folder3.
            item4.
            item5.
            item6.
folder4.
      item7.
      item8.
      folder5.
            item9.
            item10.
folder6.
      folder7.
      folder8.

I need to to allow the user to drag and drop an item within the folder but not outside a folder. But he can drag and drop a folder anywhere.

So the user cant drag and drop an item folder1 or folder4 or folder6 level.

I found couple examples on google...but nothing worked in my favor.

Answer 1

Here is an example with xml data : I use mx_internal::_dropData property to find the real parent.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           minWidth="955" minHeight="600" 
           >


<fx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.core.mx_internal;
        import mx.events.DragEvent;


        protected function myTree_dragDropHandler(event:DragEvent):void
        {
            /*
            Pay attention at mx_internal namespace :
            Behaviour could change in the next flex version.
            Drop data structure.
            _dropData = { 
                parent: parent, 
                index: index, 
                localX: event.localX, 
                localY: event.localY, 
                emptyFolder: emptyFolder, 
                rowHeight: rowHeight, 
                rowIndex: rowNum };
            */

            var parent:XML = myTree.mx_internal::_dropData.parent;
            var draggedElement:XML = 
              (event.dragSource.dataForFormat("treeItems") as Array)[0];
            if (draggedElement.name() == "item" 
                                  && draggedElement.parent() != parent) {
                // element is an item and parent is different => can not drop                                        
                event.preventDefault();
                myTree.hideDropFeedback(event);
                Alert.show("can not drop");
            }

            // you can also play with
            // var dropIndex:int = myTree.calculateDropIndex(event);
            // myTree.getItemIndex(dropIndex)
            // but it is a little more complicated to find 
            // the real parent because we haven't drop indicator 
            // information (child or parent position).

            // I did not use xml element id but it is also possible
            // parent.id != draggedElement.parent().id

        }

    ]]>
</fx:Script>


<fx:Declarations>
    <fx:XMLList id="treeData">
        <folder id="folder1" label="Folder 1">
            <folder id="folder2" label="Folder 2">
                <item id="item1" label="Item 1"/>
                <item id="item2" label="Item 2"/>
                <item id="item3" label="Item 3"/>
            </folder>
            <folder id="folder3" label="Folder 3">
                <item id="item4" label="Item 4"/>
                <item id="item5" label="Item 5"/>
            </folder>
            <item id="item6" label="Item 6"/>
            <item id="item7" label="Item 7"/>
        </folder>
    </fx:XMLList>
</fx:Declarations>

<mx:Tree id="myTree" 
         width="50%" height="100%" 
         labelField="@label"
         dragEnabled="true"
         dropEnabled="true"
         dragMoveEnabled="true"
         showRoot="true" 
         dataProvider="{treeData}" 
         dragDrop="myTree_dragDropHandler(event)"/>


</s:Application>