2 Replies Latest reply on Nov 5, 2009 10:50 PM by ne.ha

    How do i Drag and drop From one tree to another and vise versa?

    ne.ha

      I have two tree structures and i'm trying to drag a leaf of a branch from one tree to another and vise versa. i'm using flex 3 to code it. I'm also trying to put a prevention on dropping a leaf of one tree from being dropped inside a branch of another tree. Anything that is dragged over to another tree should be placed as a dangling node in that tree. Please share this code and help me find a solution.

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application

       

       

      xmlns:mx="

       

      http://www.adobe.com/2006/mxml

      "

      xmlns:comp="

       

      com.adobe.flex.extras.controls.*

      "

      initialize="data2

      new

      ArrayCollection(countries);"

      layout="

       

      absolute

      "

      verticalAlign="

       

      middle" backgroundColor="white

      "

      height="

       

      551"

      >

       

       

       

       

       

       

      <mx:Script>

      <![CDATA[

       

       

      import

      mx.events.FlexEvent;

       

       

      import

      mx.collections.ArrayCollection;

       

       

      import

      mx.controls.Alert;

       

       

      import

      mx.events.DragEvent;

       

       

      import

      mx.managers.DragManager;

       

       

      import

      mx.core.DragSource;

       

       

      import

      mx.core.UIComponent;

       

       

      import

      mx.controls.Tree;

       

       

      // data provider for role name

      [

       

      Bindable] private var

      data2: ArrayCollection;

       

       

       

      // variable to store the node that is dragged from a tree

       

       

      private var draggedItemOfAccessTree:XML = null

      ;

       

       

      private var draggedItemOfExclusionTree:XML = null

      ;

       

       

      private var dragItemAccess:DisplayObject =null

      ;

       

       

      private var dragItemExclusion:DisplayObject =null

      ;

       

       

       

      // Array to store the Role list

      [

       

      Bindable]public var

      countries: Array = [

      {id: 0, name:

       

      "Role 1"

      },

      {id: 1, name:

       

      "Role 2"

      },

      {id: 2, name:

       

      "Role 3"

      },

      {id: 3, name:

       

      "Role 4"

      },

      {id: 4, name:

       

      "Role 5"

      },

      {id: 5, name:

       

      "Role 6"

      },

      {id: 6, name:

       

      "Role 7"

      },

      {id: 7, name:

       

      "Role 8"

      },

      {id: 8, name:

       

      "Role 9"

      },

      {id: 9, name:

       

      "Role 10"

      },

      {id: 10,name:

       

      "Role 11"

      }

       

      ];

       

       

       

       

      // this event is called when we begin dragging a node in a tree

       

       

       

      private function onAccessListDragEnter( event:DragEvent ) : void

      {

      event.preventDefault();

       

       

      var

      ds1:DragSource = event.dragSource;

       

       

      var items1:Array = ds1.dataForFormat("treeItems") as

      Array;

       

       

       

      if (items1 != null && items1.length > 0 && (items1[0] is

      XML))

      {

      draggedItemOfAccessTree = items1[0];

      dragItemAccess = items1[0]

       

      as

      DisplayObject;

      }

      DragManager.acceptDragDrop(UIComponent(event.currentTarget));

      }

       

       

       

       

      private function onExclusionListDragEnter( event:DragEvent ) : void

      {

      event.preventDefault();

       

       

      var

      ds2:DragSource = event.dragSource;

       

       

      var items2:Array = ds2.dataForFormat("treeItems") as

      Array;

       

       

      if (items2 != null && items2.length > 0 && (items2[0] is

      XML))

      {

      draggedItemOfExclusionTree = items2[0];

      dragItemExclusion =items2[0]

       

      as

      DisplayObject;

      }

      DragManager.acceptDragDrop(UIComponent(event.currentTarget));

      }

       

       

       

      private function onAccessListDragOver( event:DragEvent ) : void

      {

      event.preventDefault();

       

       

      var

      var1:Number = AccessTree.selectedIndex;

       

       

      var

      var2:Number = ExclusionTree.calculateDropIndex(event);

       

       

      var node1:XML = AccessTree.selectedItem as

      XML;

       

       

      var node2:XML = ExclusionTree.calculateDropIndex(event) as

      XML;

       

       

      //restrict drag & drop to nodes within same parent

       

       

       

      if

      (draggedItemOfAccessTree.parent() == node1.parent() || draggedItemOfAccessTree.parent() != node1.parent())

      {

      DragManager.showFeedback(DragManager.NONE);

       

       

      //return;

      }

       

       

       

      else

      DragManager.showFeedback(DragManager.MOVE);

      }

       

       

       

      private function onExclusionListDragOver( event:DragEvent ) : void

      {

      event.preventDefault();

       

       

      var

      var1:Number = ExclusionTree.selectedIndex;

       

       

      var

      var2:Number = AccessTree.calculateDropIndex(event);

       

       

      var node1:XML = AccessTree.calculateDropIndex(event) as

      XML;

       

       

      var node2:XML = ExclusionTree.selectedItem as

      XML;

       

       

      //restrict drag & drop to nodes within same parent

       

       

      if

      ( draggedItemOfExclusionTree.parent() == node2.parent() || draggedItemOfExclusionTree.parent() != node2.parent())

      {

      DragManager.showFeedback(DragManager.NONE);

       

       

      // return;

      }

       

       

       

      else

      DragManager.showFeedback(DragManager.MOVE);

      }

       

       

       

      private function onAccessListDragDrop( event:DragEvent ) : void

      {

      event.preventDefault();

       

       

      var

      Sindex:Number = AccessTree.selectedIndex;

       

       

      var

      Eindex:Number= ExclusionTree.calculateDropIndex(event);

       

       

      var Enode:XML = ExclusionTree.selectedItem as

      XML;

       

       

      var Anode:XML = AccessTree.selectedItem as

      XML;

       

       

       

       

      if

      ((draggedItemOfAccessTree.parent() != Anode.parent()) )

      {

      AccessTree.removeChildAt(Sindex);

      ExclusionTree.addChildAt(dragItemAccess , Eindex);

       

       

      // AccessTree.rdataDescriptor.removeChildAt(Anode.parent(),draggedItemOfAccessTree,Sindex);

       

       

      //ExclusionTree.dataDescriptor.addChildAt(Enode.parent(),draggedItemOfAccessTree,Eindex);

      }

      }

       

       

       

       

       

       

      private function onExclusionListDragDrop( event:DragEvent ) : void

      {

      event.preventDefault();

       

       

      var

      Eindex:Number = ExclusionTree.selectedIndex;

       

       

      var

      Sindex:Number = AccessTree.calculateDropIndex(event);

       

       

      var Anode:XML = AccessTree.selectedItem as

      XML;

       

       

      var Enode:XML = ExclusionTree.selectedItem as

      XML;

       

       

       

      if

      ((draggedItemOfExclusionTree.parent() != Enode.parent()) )

      {

      ExclusionTree.removeChildAt(Eindex);

      AccessTree.addChildAt(dragItemExclusion, Sindex);

       

       

       

      // ExclusionTree.dataDescriptor.removeChildAt(Enode.parent(),draggedItemOfExclusionTree,Eind ex);

       

       

      // AccessTree.dataDescriptor.addChildAt(Anode.parent(),draggedItemOfExclusionTree,Eindex);

      }

      }

       

       

       

       

      private function onDragComplete( event:DragEvent ) : void

      {

      AccessTree.selectedIndex = -1;

      ExclusionTree.selectedIndex = -1;

      }

       

       

       

       

       

      private function clickHandler(event:Event):

      void

      {

       

       

      var button:Button=event.target as

      Button;

      Alert.show(

       

      "Changes are saved"

      );

      }

       

       

       

       

      private function fetchMenuHandler(event:Event):

      void

      {

       

       

      if(autoSuggest.text==""

      )

      {

      Alert.show(

       

      "Please select Role Name"

      );

      }

       

       

      else

      {

      AccessTree.dataProvider=AccessListTreeData

      ExclusionTree.dataProvider=ExclusionListTreeData

      }

      }

       

      ]]>

       

       

       

      </mx:Script>

       

       

       

      <!--

      <mx:Style>

      global

      {

      font-family: Verdana;

      font-weight: normal;

      verticalGap: 0;

      horizontalGap: 0;

      padding-left: 0;

      padding-right: 0;

      padding-top: 0;

      padding-bottom: 0;

       

      }

      FormHeading

      {

      font-size: 10;

      font-weight: normal;

      }

      </mx:Style>

      -->

       

       

      <mx:XMLList id="AccessListTreeData"

      >

       

       

      <node label="GESS 1"

      >

       

       

      <node label="Home"

      >

       

       

       

      <node label="sdasd"

      />

       

       

      </node>

       

       

       

      <node label="Human Resource">

       

       

      <node label="Personal"

      />

       

       

      </node>

       

       

       

      <node label="Travel"

      >

       

       

      <node label="Professional"

      />

       

       

      <node label="Domestic Travel"

      />

       

       

      <node label="international Travel"

      />

       

       

      </node>

       

       

       

      </node>

       

       

       

      </mx:XMLList>

       

       

       

       

      <mx:XMLList id="ExclusionListTreeData"

      >

       

       

      <node label="Menu"

      >

       

       

      <node label="Menu 1"

      >

       

       

      <node label="Sub Menu 1"

      />

       

       

      <node label="Sub Menu 2"

      />

       

       

      </node>

       

       

      <node label="Menu 2"

      >

       

       

      <node label="Sub Menu 1"

      />

       

       

      <node label="Sub Menu 2"

      />

       

       

      </node>

       

       

      </node>

       

       

      </mx:XMLList>

       

       

       

       

       

       

       

      <mx:Label text="ADD ACCESS/DELETE ACCESS" fontSize="16" fontWeight="bold" y="10"

      />

       

       

      <mx:Label text="Select Role" x="321" y="36" width="131" height="29" fontSize="15" fontWeight="bold"

      />

       

       

       

       

      <mx:Form id="Role" height="124" x="307" y="73" width="316"

      >

       

       

      <mx:FormItem fontSize="11" label="Role Name" required="true" fontWeight="bold"

      >

       

       

      <comp:AutoCompleteModified id="autoSuggest

      "

      width="

       

      155

      "

      dataProvider="

       

      {data2}

      "

      labelField="

       

      name

      "

       

       

      />

       

       

      </mx:FormItem>

       

       

      </mx:Form>

       

       

       

       

      <mx:Text x="267" y="205" width="138" height="20" fontSize="12" fontWeight="bold" text="Access List"

      />

       

       

       

      <mx:Label x="578" y="205" height="20" width="114" fontSize="12" fontWeight="bold" text="Exclusion List"

      />

       

       

       

      <mx:Button label="Save Changes" x="421.5" y="497" width="109.5" height="23" click="clickHandler(event)"

      />

       

       

       

      <mx:Button id="addButton" label="Fetch Menu" click="fetchMenuHandler(event)" enabled="true" x="412" y="142" width="128"

      />

       

       

       

       

      <mx:Tree id="AccessTree" labelField="@label

      "

      width="

       

      197" height="246

      "

      allowMultipleSelection="

       

      true

      "

      dragEnabled="

       

      true

      "

      dropEnabled="

       

      true

      "

      dragMoveEnabled="

       

      true

      "

      dragEnter="onAccessListDragEnter(event)"

      dragOver="onAccessListDragOver(event)"

      dragDrop="onAccessListDragDrop(event)"

      x="

       

      227" y="233"

      />

       

       

       

       

      <mx:Tree id="ExclusionTree" labelField="@label

      "

      width="

       

      205" height="248

      "

      dropEnabled="

       

      true

      "

      dragEnabled="

       

      true

      "

      dragMoveEnabled="

       

      true

      "

      dragEnter="onExclusionListDragEnter(event)"

      dragOver="onExclusionListDragOver(event)"

      dragDrop="onExclusionListDragDrop(event)"

      x="

       

      522" y="233

      "

       

       

      />

      </mx:Application>