Flex Tree Drag Drop - PullRequest
Новая
       11

Flex Tree Drag Drop

2 голосов
/ 09 мая 2011

Я работаю над функцией перетаскивания гибкого дерева, и у меня есть пара вопросов.

Я дал коллекцию массивов в качестве поставщика данных. Каждая ветвь (папка) и лист (элемент)имеет уникальный идентификатор.

древовидная структура выглядит примерно так: 

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

Мне нужно разрешить пользователю перетаскивать элемент внутри папки, но не за ее пределы.,Но он может перетаскивать папку куда угодно.

Таким образом, пользователь не может перетаскивать элементы item1 или folder4 или folder6 level.

Я нашел несколько примеров в Google ... но ничего не помоглов мою пользу.

1 Ответ

2 голосов
/ 08 сентября 2011

Вот пример с данными 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>
...