Comment est-ce que je limite les noeuds d'arbre d'être traînés de leur noeud actuel dans flex 3?

Question

J'ai donc un composant flex tree avec une collection xmllist en tant que fournisseur de données. J'aimerais pouvoir réorganiser les feuilles et les branches dans l'arbre par glisser-déposer. Je veux limiter la zone de dépôt au niveau actuel de l'élément en cours de déplacement. Comme

 
     branch 
     branch 0 
     leaf 1 
     leaf 2 
     branch x 
     leaf a 
     leaf b 
    

Ainsi, la branche x ne peut pas être déplacé sous la branche 0 et la feuille d'un ne pouvait pas être déplacé sous la branche 0.

Answer 1

Ok, voici un moyen assez simple pour ce faire, sur la base du dernier exemple en this Flex Quick Starts article. Cela devrait probablement être amélioré en utilisant les indicateurs de chute «appropriés» (les lignes entre les éléments) au lieu de simplement sélectionner l'élément sous la souris lorsque vous faites glisser.

La partie la plus pertinente est la méthode onDragOver(), où nous limitons où les éléments peuvent être supprimés.

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 
    <mx:Script> 
     <![CDATA[ 

      import mx.events.DragEvent; 
      import mx.managers.DragManager; 
      import mx.core.DragSource; 
      import mx.core.UIComponent; 
      import mx.controls.Tree; 

      private var _draggedItem:XML = null; 


      private function onDragEnter(event:DragEvent) : void 
      { 
       event.preventDefault(); 
       event.currentTarget.hideDropFeedback(event); 

       var ds:DragSource = event.dragSource; 
       var items:Array = ds.dataForFormat("treeItems") as Array; 
       if (items != null && items.length > 0 && (items[0] is XML)) 
        _draggedItem = items[0]; 

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

      private function onDragOver(event:DragEvent) : void 
      { 
       event.preventDefault(); 
       event.currentTarget.hideDropFeedback(event); 

       tree.selectedIndex = tree.calculateDropIndex(event); 
       var node:XML = tree.selectedItem as XML; 

       // restrict drag & drop to nodes within same parent 
       if (_draggedItem.parent() != node.parent()) 
       { 
        DragManager.showFeedback(DragManager.NONE); 
        return; 
       } 

       DragManager.showFeedback(DragManager.MOVE); 
      } 

      private function onDragDrop(event:DragEvent) : void 
      { 
       event.preventDefault(); 
       event.currentTarget.hideDropFeedback(event); 

       tree.selectedIndex = tree.calculateDropIndex(event); 
       var node:XML = tree.selectedItem as XML; 

       var addToIndex:int = node.childIndex(); 
       if ((_draggedItem.parent() == node.parent()) && (addToIndex != _draggedItem.childIndex())) 
       { 
        tree.dataDescriptor.removeChildAt(node.parent(), _draggedItem, _draggedItem.childIndex()); 
        tree.dataDescriptor.addChildAt(node.parent(), _draggedItem, addToIndex); 
       } 
      } 

      private function onDragComplete(event:DragEvent) : void 
      { 
       tree.selectedIndex = -1; 
      }  
     ]]> 
    </mx:Script>  
    <mx:XML id="treeData" xmlns=""> 
     <root> 
      <node label="Massachusetts" type="state" data="MA"> 
       <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> 
      <node label="California" type="state" data="CA"> 
       <node label="San Francisco" type="city" > 
        <node label="Frog Lane" type="restaurant" /> 
       </node> 
      </node> 
     </root> 
    </mx:XML> 
    <mx:Tree width="100%" height="100%" id="tree" 
     labelField="@label" 
     dataProvider="{treeData.node}" 
     allowMultipleSelection="false" 
     dragEnabled="true" 
     dropEnabled="true" 
     dragMoveEnabled="false" 
     dragEnter="onDragEnter(event)" 
     dragOver="onDragOver(event)" 
     dragDrop="onDragDrop(event)" 
     dragComplete="onDragComplete(event)"> 
    </mx:Tree>   
</mx:Application>