3 Replies Latest reply on Feb 8, 2007 4:01 PM by Pigg_Man

    Can anyone help me with Drag and Drop for a tree control in Flex 2.0

    Pigg_Man Level 1
      I'm trying to get a node when dropped to demote and to become a child.
      I've looked and tried everything. If anyone could help or give me a
      quick example I would appreciate it... very much so.

      So far I have a simple tree structure as such.
      var temp:String = "<root label=\"Default Policy\">"+
      "<node label=\"node1\"/>"+
      "<node label=\"node2\"/>"+
      "<node label=\"node3\"/>"+
      "<node label=\"node4\"/>"+
      "<node label=\"node5\">"+
      "</root>";

      I want to be able to drop node1 on node3 and for node1 to become a
      child of node3.
        • 1. Re: Can anyone help me with Drag and Drop for a tree control in Flex 2.0
          Pigg_Man Level 1
          I figured out how to do this. Heres the code:

          <?xml version="1.0"?>
          <!-- dragdrop\SimpleTreeSelf.mxml -->
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"

          borderStyle="absolute" creationComplete="classCreationComplete();">

          <mx:Script>
          <![CDATA[
          import mx.controls.listClasses.IListItemRenderer;
          import mx.managers.DragManager;
          import mx.events.DragEvent;

          //Class variables
          private var DragEnterIndices:Array;
          private var DragEnterItems:Array;

          private function classCreationComplete () : void {
          MyTree.callLater(treeCallLater);
          }

          private function treeCallLater () : void {
          MyTree.selectedIndex = 0;
          MyTree.expandItem(MyTree.dataProvider[0], true);
          }

          private function dragEnter (e:DragEvent) : void {
          DragManager.acceptDragDrop(Tree(e.currentTarget));
          DragEnterIndices = MyTree.selectedIndices;
          DragEnterItems = MyTree.selectedItems;
          }

          private function dragOver (e:DragEvent) : void {
          var dropIndex:int = MyTree.calculateDropIndex(e);
          var renderer:IListItemRenderer = MyTree.indexToItemRenderer(dropIndex);

          if (renderer != null) {
          MyTree.selectedIndex = dropIndex;
          DragManager.showFeedback(DragManager.COPY);
          } else {
          MyTree.selectedIndex = -1;
          DragManager.showFeedback(DragManager.NONE);
          }
          }

          private function dragDrop (e:DragEvent) : void {
          var node:XML = XML(MyTree.selectedItem);
          var dropIndex:int = MyTree.calculateDropIndex(e);
          MyTree.selectedIndex = dropIndex;
          var selectedItem:Object = MyTree.selectedItem;

          for (var i:int = 0 ; i < DragEnterItems.length; i++) {
          var insert:XML = <node />;
          insert.@label = DragEnterItems .@label;
          node.appendChild (insert);

          var parent:XML = XML(DragEnterItems
          ).parent();
          var xlcParent:XMLListCollection = new XMLListCollection(parent.children());
          var deleteIndex:int = xlcParent.getItemIndex(XML(DragEnterItems ));

          if (deleteIndex != -1)
          xlcParent.removeItemAt (deleteIndex);
          }

          MyTree.selectedItem = selectedItem;
          DragEnterIndices = MyTree.selectedIndices;
          }


          private function dragComplete (e:DragEvent) : void {
          if (DragEnterIndices.length > 0) {
          if (DragEnterIndices[0] != -1) {
          MyTree.selectedIndices = DragEnterIndices;
          } else {
          MyTree.selectedIndex = 0;
          }
          } else {
          MyTree.selectedIndex = 0;
          }
          }
          ]]>
          </mx:Script>

          <mx:XMLListCollection id="TreeDP">
          <mx:XMLList>
          <root label="DefaultNode">
          <node1 label="node1"/>
          <node2 label="node2"/>
          <node3 label="node3"/>
          <node4 label="node4"/>
          <node5 label="node5"/>
          </root>
          </mx:XMLList>
          </mx:XMLListCollection>

          <mx:Tree id="MyTree"
          dataProvider="{TreeDP}"
          height="375" width="486"
          labelField="@label"
          dragEnabled="true"
          allowMultipleSelection="true"
          dragEnter="dragEnter(event);"
          dragOver="dragOver(event);"
          dragDrop="dragDrop(event);"
          dragComplete="dragComplete(event);">
          </mx:Tree>
          </mx:Application>

          Does Anyone have an easier way to do this? To bad Flex 2.0 doesn't do this crap on it's own. This isn't really all that hard. Cheers to anyone that can give me a better solution
          • 3. Re: Can anyone help me with Drag and Drop for a tree control in Flex 2.0
            Pigg_Man Level 1
            Actually use this code for the appending of the child... If you don't then any children from the source node wont get copied over.

            for (var i:int = 0 ; i < DragEnterItems.length; i++) {
            var insert:XML = <node />;
            insert.@label = DragEnterItems .@label;
            if (XML(DragEnterItems
            ).children().length() > 0) {
            var children:XMLList = XML(DragEnterItems ).children();
            for (var j:int = 0; j < children.length(); j++) {
            insert.appendChild(children[j]);
            }
            }

            node.appendChild (insert);

            var parent:XML = XML(DragEnterItems
            ).parent();
            var xlcParent:XMLListCollection = new XMLListCollection(parent.children());
            var deleteIndex:int = xlcParent.getItemIndex(XML(DragEnterItems ));

            if (deleteIndex != -1)
            xlcParent.removeItemAt (deleteIndex);
            }