Flex tree drag and drop

I have a flex application with 2 tree. I should allow the drag and drop from left tree to right tree based on the local name of XML. While working on this I encountered peculiar kind of problems.

when dragged and dropped to right tree from left tree, the dragged item in lefttree is appearing twice
when certain items are dragged to right, they are appearing twice in right side tree.

Here is the code

//Code


private function mouseMoveHandler(event:MouseEvent):void
   {
    // Get the object of drag initiator
    var dragInitiator:Tree = Tree(event.currentTarget);

    //
    var dragItems:Array = dragInitiator.selectedItems as Array;

    //Create a DragSource object
    var dragSource:DragSource = new DragSource();

    // Add item to object
    dragSource.addData(dragItems,'treeItems');

    // Call drag manager to start drag
    DragManager.doDrag(dragInitiator,dragSource,event);

   }

  private function dragEnterHandler(event:DragEvent):void
   {
    // Checking the source format to decide whether to accept or not 
    event.preventDefault();
    if(event.dragSource.hasFormat('treeItems'))
     {
      //Get the object of drop targer
      var dropTarget:Tree = Tree(event.currentTarget);

      //To accept the drop
      DragManager.acceptDragDrop(dropTarget);

      // Show readiness to accept
      DragManager.showFeedback(DragManager.COPY);
     }
   }
  private function dragDropHandler(event:DragEvent):void
   {
    event.preventDefault();
    // Getting the initiator reference
    var initiator:String = (event.dragInitiator as Tree).id;

    // Getting the items dragged
    var draggedItems:Array = event.dragSource.dataForFormat("treeItems") as Array;

    // Getting the reference of drop target 
    var dropTarget:Tree = Tree(event.currentTarget);

    if(initiator == "leftTree")
    { 
     // Add each dragged item to the Tree by apppending it
        // as a child of the selected node in the Tree.
        for each( var object:Object in draggedItems)
        {
         var itemXML:XML = object as XML;


         if(itemXML.localName() == "list1")
          {

           IList(dropTarget.dataProvider).addItem(itemXML);
           trace(itemXML.toXMLString());
          }
         else
          {
           trace(itemXML.toXMLString());

          }

        }    
    }
    else
     trace("Drag not from left tree");
   }
<mx:HBox>
  <mx:Tree id="leftTree" 
   dataProvider="{XMLColln}" 
    labelField="@label" showRoot="false" 
     width="300" height="500"
      folderClosedIcon="{folderIcon}" 
       folderOpenIcon="{folderIcon}" 
        defaultLeafIcon="{leafIcon}" 
         disclosureClosedIcon="{itemExpand}" 
          disclosureOpenIcon="{itemCollapse}" 
           left="20" top="50" 
            dragEnabled="true"/>



  <mx:Tree id="rightTree" 
   dataProvider="{XMLColln2}" 
   width="300" height="500"
    folderClosedIcon="{folderIcon}" 
     folderOpenIcon="{folderIcon}" 
      defaultLeafIcon="{leafIcon}" 
       disclosureClosedIcon="{itemExpand}" 
        disclosureOpenIcon="{itemCollapse}"
         labelField="@label" showRoot="false" 
          dragEnter="dragEnterHandler(event)" 
           dragDrop="dragDropHandler(event)"/>

</mx:HBox>


// Code end

Both XMLColln and XMLColln2 are of XMLListCollection type

Can anyone please help in figuring out solution to this problem.

Thanks in advance. Shaun.

ansaurus

tags:

views:

answers:

Flex tree drag and drop

related questions