0 Replies Latest reply on Mar 6, 2008 6:26 PM by vyasvemu

    Problem in Drag & Drop between 2 tree controls

    vyasvemu
      I am trying to implement drag and drop between 2 tree controls. Used code given at
      http://weblogs.macromedia.com/pent/archives/2006/11/tree_drag_and_d.cfm and changed it so that atleast the UI comes up.

      But when I drag from first tree and drop into the second, I am getting duplicate nodes. The code is given below.

      Need help desperately..
      Jupiter1199

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="src/TreeDragTo/index.html" creationComplete="init();">
      <mx:Script>
      <![CDATA[
      import mx.events.DragEvent;
      import mx.managers.DragManager;
      import mx.core.DragSource;
      import mx.core.UIComponent;
      import mx.controls.Tree;

      private function init():void
      {
      tree1.openItems=treeDataList1;
      tree2.openItems=treeDataList2;
      }
      /**
      * Called as soon as the dragProxy enters the target. You can add logic
      * to determine if the target will accept the drop based on the
      * dragInitiator, the data available in the dragSource, or whatever.
      * Here the drop is blindly accepted.
      */
      private function onDragEnter( event:DragEvent ) : void
      {
      DragManager.acceptDragDrop(UIComponent(event.currentTarget));
      }
      /**
      * Called while the dragProxy is over the drop target. You can
      * use this function to determine the type of feedback to show.
      * Because the List is set to allow MOVE (the item is deleted
      * once dropped), different feedback possibilities are given.
      *
      * Also, for this application, the Tree control node the dragProxy is
      * over is selected. As the dragProxy moves, the Tree control&apos;s
      * selection changes.
      *
      * A complexity in this application is that the drop is being allowed
      * only over nodes whose type is NOT &apos;state&apos;.
      * The feedback is removed.
      */
      private function onDragOver( event:DragEvent ) : void
      {
      // r is the visible index in the tree
      var tree:Tree = Tree(event.currentTarget);
      var r:int = tree.calculateDropIndex(event);
      tree.selectedIndex = r;
      tree.expandChildrenOf(tree.selectedItem,true);

      // retrieving the newly selected node, you can examine it and decide to tell
      // the user the drop is invalid by changing the feedback.
      var node:XML = tree.selectedItem as XML;
      if( node.@type == "city" ) {
      DragManager.showFeedback(DragManager.NONE);
      return;
      }

      // the type of drop - copy, link, or move can be reflected in the feedback as well.
      // Here the control and shift keys determine that action.
      if (event.ctrlKey)
      DragManager.showFeedback(DragManager.COPY);
      else if (event.shiftKey)
      DragManager.showFeedback(DragManager.LINK);
      else {
      DragManager.showFeedback(DragManager.MOVE);
      }
      }

      /**
      * called when the dragProxy is released
      * over the drop target. The information in the dragSource
      * is extracted and processed.
      *
      * The target node is determined and
      * all of the data selected (the List has allowMultipleSection
      * set) is added.
      */
      private function onDragDrop( event:DragEvent ) : void
      {
      var ds:DragSource = event.dragSource;
      var tree:Tree = Tree(event.currentTarget);

      // retrieve the data associated with the "items" format. This will be the data that
      // the dragInitiator has copied into the DragSource.
      var items:Array = ds.dataForFormat("treeItems") as Array;

      // determine where in the tree the drop occurs and select that node by the index; followed by
      // retrieving the node itself.
      var r:int = tree.calculateDropIndex(event);
      tree.selectedIndex = r;
      var node:XML = tree.selectedItem as XML;
      var p:*;

      // if the selected node has children (it is type==city),
      // then add the items at the beginning
      if( tree.dataDescriptor.hasChildren(node) ) {
      p = node;
      r = 0;
      } else {
      p = node.parent();
      }

      // taking all of the items in the DragSouce, insert them into the
      // tree using parent p.
      for(var i:Number=0; i < items.length; i++) {
      var insert:XML = <node />;
      insert.@label = items .@label;
      insert.@type = "restaurant";
      tree.dataDescriptor.addChildAt(p, insert, r+i);
      }
      }
      /**
      * Called when the drag operation completes, whether
      * successfully or not. The tree is cleared of its
      * selection.
      */
      private function onDragComplete( event:DragEvent ) : void
      {
      var tree:Tree = Tree(event.currentTarget);
      tree.selectedIndex = -1;
      }
      ]]>
      </mx:Script>
      <mx:XML id="treeDataList1">
      <node label="From City">
      <node label="Boston" type="city" >
      <node label="Smoke House Grill" type="restaurant" />
      <node label="Equator" type="restaurant" />
      <node label="Aquataine" type="restaurant" />
      <node label="Grill 23" type="restaurant" />
      </node>
      <node label="Provincetown" type="city" >
      <node label="Lobster Pot" type="restaurant" />
      <node label="The Mews" type="restaurant" />
      </node>
      <node label="San Francisco" type="city" >
      <node label="Frog Lane" type="restaurant" />
      </node>
      <node label="Portland" type="city" >
      <node label="Monkey Lane" type="restaurant" />
      </node>
      <node label="Santa Fe" type="city" >
      <node label="Southern Spice" type="restaurant" />
      </node>
      </node>
      </mx:XML>
      <mx:XML id="treeDataList2">
      <node label="To City">
      <node label="Dallas" type="city" >
      <node label="Chimney Stack" type="restaurant" />
      <node label="Radius" type="restaurant" />
      </node>
      <node label="Austin" type="city" >
      <node label="Red Lobster" type="restaurant" />
      </node>
      <node label="New York" type="city" >
      </node>
      </node>
      </mx:XML>
      <mx:Panel x="10" y="20" width="600" height="300" layout="absolute" title="Drag onto Tree">
      <mx:HBox x="0" y="0" width="100%" height="100%">
      <mx:Tree x="20" y="20" width="279" height="278"
      id="tree1"
      dataProvider="{treeDataList1}"
      labelField="@label"
      dragEnabled="true"
      dragMoveEnabled="true"
      dropEnabled="true">
      </mx:Tree>
      <mx:Tree x="300" y="20" width="279" height="278"
      id="tree2"
      dataProvider="{treeDataList2}"
      labelField="@label"
      dropEnabled="true"
      dragEnter="onDragEnter(event)"
      dragOver="onDragOver(event)"
      dragDrop="onDragDrop(event)" >
      </mx:Tree>
      </mx:HBox>
      </mx:Panel>
      </mx:Application>