플렉스 트리 드래그 드롭

Question

나는 플렉스 트리의 드래그 앤 드롭 기능에 대해 연구 중이며 몇 가지 질문이 있습니다.

데이터 공급자로 배열 컬렉션을 제공했습니다. 각 분기 (폴더) 및 리프 (항목)에는 고유 한 ID가 있습니다.

트리 구조가 이와 같은 것입니다.

folder1. 
     folder2. 
      item1. 
      item2. 
      item3. 
     folder3. 
      item4. 
      item5. 
      item6. 
folder4. 
     item7. 
     item8. 
     folder5. 
      item9. 
      item10. 
folder6. 
     folder7. 
     folder8. 

사용자가 폴더 내에서 항목을 끌어서 놓을 수는 있지만 폴더 외부에서는 항목을 놓을 수 없도록해야합니다. 그러나 그는 어디서나 폴더를 드래그 앤 드롭 할 수 있습니다.

그래서 사용자는 folder1 또는 folder4 또는 folder6 레벨의 항목을 끌어다 놓을 수 없습니다.

Google에서 몇 가지 예를 발견했지만 ... 내 호의로 작용하지 않았습니다.

Answer 1

다음은 xml 데이터를 사용한 예입니다. mx_internal :: _ dropData 속성을 사용하여 실제 상위를 찾습니다.

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" 
      minWidth="955" minHeight="600" 
      > 


<fx:Script> 
    <![CDATA[ 
     import mx.controls.Alert; 
     import mx.core.mx_internal; 
     import mx.events.DragEvent; 


     protected function myTree_dragDropHandler(event:DragEvent):void 
     { 
      /* 
      Pay attention at mx_internal namespace : 
      Behaviour could change in the next flex version. 
      Drop data structure. 
      _dropData = { 
       parent: parent, 
       index: index, 
       localX: event.localX, 
       localY: event.localY, 
       emptyFolder: emptyFolder, 
       rowHeight: rowHeight, 
       rowIndex: rowNum }; 
      */ 

      var parent:XML = myTree.mx_internal::_dropData.parent; 
      var draggedElement:XML = 
       (event.dragSource.dataForFormat("treeItems") as Array)[0]; 
      if (draggedElement.name() == "item" 
            && draggedElement.parent() != parent) { 
       // element is an item and parent is different => can not drop           
       event.preventDefault(); 
       myTree.hideDropFeedback(event); 
       Alert.show("can not drop"); 
      } 

      // you can also play with 
      // var dropIndex:int = myTree.calculateDropIndex(event); 
      // myTree.getItemIndex(dropIndex) 
      // but it is a little more complicated to find 
      // the real parent because we haven't drop indicator 
      // information (child or parent position). 

      // I did not use xml element id but it is also possible 
      // parent.id != draggedElement.parent().id 

     } 

    ]]> 
</fx:Script> 


<fx:Declarations> 
    <fx:XMLList id="treeData"> 
     <folder id="folder1" label="Folder 1"> 
      <folder id="folder2" label="Folder 2"> 
       <item id="item1" label="Item 1"/> 
       <item id="item2" label="Item 2"/> 
       <item id="item3" label="Item 3"/> 
      </folder> 
      <folder id="folder3" label="Folder 3"> 
       <item id="item4" label="Item 4"/> 
       <item id="item5" label="Item 5"/> 
      </folder> 
      <item id="item6" label="Item 6"/> 
      <item id="item7" label="Item 7"/> 
     </folder> 
    </fx:XMLList> 
</fx:Declarations> 

<mx:Tree id="myTree" 
     width="50%" height="100%" 
     labelField="@label" 
     dragEnabled="true" 
     dropEnabled="true" 
     dragMoveEnabled="true" 
     showRoot="true" 
     dataProvider="{treeData}" 
     dragDrop="myTree_dragDropHandler(event)"/> 


</s:Application>