防止Flex树下降反馈

时间:2013-04-12 16:31:48

标签: actionscript-3 flex drag-and-drop

我想允许用户重新排序Flex树文件夹中的项目,但不要将这些项目移到文件夹之外。我可以防止外部丢失成功,但我想给用户反馈(在丢弃之前),丢弃不会成功。我已经找到了很多关于掉落动作的例子,但没有向用户显示正确的反馈。

根据Tree文档,我应该能够在DragManager.showFeedback(DragManager.NONE)事件期间调用dragOver,但这不起作用。下面是一个简短的示例项目。有没有办法在拖动事件期间向用户表明丢弃不会成功?

提前感谢任何解决方案!

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       width="354"
                       height="480">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.core.IUIComponent;
            import mx.core.mx_internal;
            import mx.events.DragEvent;
            import mx.events.FlexEvent;
            import mx.managers.DragManager;

            protected function tree_dragEnterHandler(event:DragEvent):void {
                // only items can be dragged - not folders
                if (tree.selectedItem.@type == "item") {
                    DragManager.acceptDragDrop(IUIComponent(event.currentTarget));
                } else {
                    event.preventDefault();
                    DragManager.showFeedback(DragManager.NONE);
                }
            }

            protected function tree_dragOverHandler(event:DragEvent):void {
                var dropData:Object = tree.mx_internal::_dropData;
                var dragItem:XML = event.dragSource.dataForFormat("treeItems")[0];
                if (!dropData || !dropData.parent || !dragItem.parent() || dragItem.parent() != dropData.parent) {
                    trace("preventing drop");
                    DragManager.showFeedback(DragManager.NONE);
                    return;
                }
                trace("allowing drop");
                DragManager.showFeedback(DragManager.MOVE);
            }

            protected function tree_dragDropHandler(event:DragEvent):void {
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <fx:XML id="treeData">
            <folder id="root"
                    label="root"
                    type="root">
                <folder id="folder1"
                        label="Folder 1"
                        type="folder">
                    <folder id="folder2"
                            label="Folder 2"
                            type="folder">
                        <item id="item1"
                              label="Item 1"
                              type="item"/>
                        <item id="item2"
                              label="Item 2"
                              type="item"/>
                        <item id="item3"
                              label="Item 3"
                              type="item"/>
                        <item id="item4"
                              label="Item 4"
                              type="item"/>
                        <item id="item5"
                              label="Item 5"
                              type="item"/>
                    </folder>
                </folder>
                <folder id="folder3"
                        label="Folder 3"
                        type="folder"/>
                <folder id="folder4"
                        label="Folder 4"
                        type="folder"/>
                <folder id="folder5"
                        label="Folder 5"
                        type="folder"/>
            </folder>
        </fx:XML>
    </fx:Declarations>
    <mx:Tree id="tree"
             left="29"
             right="28"
             top="28"
             bottom="27"
             dragEnabled="true"
             dropEnabled="true"
             dragMoveEnabled="true"
             dataProvider="{treeData}"
             labelField="@label"
             dragEnter="tree_dragEnterHandler(event)"
             dragOver="tree_dragOverHandler(event)"
             dragDrop="tree_dragDropHandler(event)"
             showRoot="false">
    </mx:Tree>
</s:WindowedApplication>

1 个答案:

答案 0 :(得分:2)

令人沮丧的是,默认的拖放功能几乎提供了完成此任务所需的一切,但并不完全。似乎IlyaZ的答案应该有效,但这可能是Flex的mx:Tree控件中的一个错误。

我最终通过滚动我自己的拖放实现来实现这一点,正如SunilD提到的那样。下面列出的代码适用于将来可能遇到同样问题的任何人。

请注意,当用户拖过maxDropIndexmaxDropIndex+1之间的边界时,仍然存在一个小的视觉反馈问题:在边界的下半部分,拖放指示符将移动以指示它是可能的删除文件夹级别的项目。我仍然在寻找一个很好的解决方案(有人能指出我的树源吗?)。

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       width="354"
                       height="480">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.core.DragSource;
            import mx.core.IUIComponent;
            import mx.core.mx_internal;
            import mx.events.DragEvent;
            import mx.events.FlexEvent;
            import mx.managers.DragManager;

            protected var dragging:Boolean = false;
            protected var minDropIndex:int = 0;
            protected var maxDropIndex:int = 0;

            protected function tree_dragEnterHandler(event:DragEvent):void {
                // only items can be dropped
                if (event.dragSource.hasFormat("tree_item_node")) {
                    DragManager.acceptDragDrop(IUIComponent(event.currentTarget));
                    trace("accepting DragDrop");
                } else {
                    event.preventDefault();
                    DragManager.showFeedback(DragManager.NONE);
                    trace("rejecting DragDrop");
                }
            }

            protected function tree_dragOverHandler(event:DragEvent):void {
                var index:int = tree.calculateDropIndex(event);
                if (index < minDropIndex || index > maxDropIndex) {
                    trace("preventing drop");
                    DragManager.showFeedback(DragManager.NONE);
                    this.tree.hideDropFeedback(event);
                    return;
                }
                trace("allowing drop");
                DragManager.showFeedback(DragManager.MOVE);
                this.tree.showDropFeedback(event);
            }

            protected function tree_dragDropHandler(event:DragEvent):void {
                trace("dragDropHandler");
            }

            protected function tree_mouseMoveHandler(event:MouseEvent):void {
                // see if we should start a drag operation
                if (event.buttonDown && !dragging && tree.selectedItem && tree.selectedItem.@type == "item") {
                    // TODO: calculate the min and max drag indices from currently-selected index
                    minDropIndex = 2;
                    maxDropIndex = 7;

                    // start the drag
                    dragging = true;
                    var dragSource:DragSource = new DragSource();
                    dragSource.addData(tree.selectedItem, "tree_item_node");
                    DragManager.doDrag(IUIComponent(event.currentTarget), dragSource, event);
                }
            }

            protected function tree_dragCompleteHandler(event:DragEvent):void {
                trace("dragComplete: no longer dragging");
                this.tree.hideDropFeedback(event);
                dragging = false;
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <fx:XML id="treeData">
            <folder id="root"
                    label="root"
                    type="root">
                <folder id="folder1"
                        label="Folder 1"
                        type="folder">
                    <folder id="folder2"
                            label="Folder 2"
                            type="folder">
                        <item id="item1"
                              label="Item 1"
                              type="item"/>
                        <item id="item2"
                              label="Item 2"
                              type="item"/>
                        <item id="item3"
                              label="Item 3"
                              type="item"/>
                        <item id="item4"
                              label="Item 4"
                              type="item"/>
                        <item id="item5"
                              label="Item 5"
                              type="item"/>
                    </folder>
                </folder>
                <folder id="folder3"
                        label="Folder 3"
                        type="folder"/>
                <folder id="folder4"
                        label="Folder 4"
                        type="folder"/>
                <folder id="folder5"
                        label="Folder 5"
                        type="folder"/>
            </folder>
        </fx:XML>
    </fx:Declarations>
    <mx:Tree id="tree"
             left="29"
             right="28"
             top="28"
             bottom="27"
             dragEnabled="false"
             dropEnabled="false"
             dataProvider="{treeData}"
             labelField="@label"
             dragEnter="tree_dragEnterHandler(event)"
             dragOver="tree_dragOverHandler(event)"
             dragDrop="tree_dragDropHandler(event)"
             dragComplete="tree_dragCompleteHandler(event)"
             mouseMove="tree_mouseMoveHandler(event)"
             showRoot="false">
    </mx:Tree>
</s:WindowedApplication>