我想允许用户重新排序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>
答案 0 :(得分:2)
令人沮丧的是,默认的拖放功能几乎提供了完成此任务所需的一切,但并不完全。似乎IlyaZ的答案应该有效,但这可能是Flex的mx:Tree控件中的一个错误。
我最终通过滚动我自己的拖放实现来实现这一点,正如SunilD提到的那样。下面列出的代码适用于将来可能遇到同样问题的任何人。
请注意,当用户拖过maxDropIndex
和maxDropIndex+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>