apache-flex - 如何限制树节点从 flex 3 中的当前节点拖出？

Question

所以我有一个带有 xmllistcollection 的弹性树组件作为它的数据提供者。我希望能够通过拖放重新排列树中的树叶和树枝。我想将放置区域限制为被拖动项目的当前级别。像

      分支
       分支 0
         叶 1
         叶 2
       分支 x
         叶a
         叶b
       

因此，分支 x 不能移动到分支 0 下，叶 a 不能移动到分支 0 下。

Answer 1

好的，这是一个非常简单的方法，基于这篇 Flex 快速入门文章中的最后一个示例。这应该可以通过使用“正确的”放置指示器（项目之间的线）而不是在拖动时仅选择鼠标下的项目来改进。

最相关的部分是onDragOver()方法，我们在其中限制可以丢弃项目的位置。

<?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>