防止Flex树丢弃反馈
[英]Preventing Flex tree drop feedback
问题描述
我想允许用户对Flex树文件夹中的项目重新排序，但不能将这些项目移出文件夹。 我可以阻止外部放置成功，但是我想（在放置之前）向用户反馈，放置不会成功。 我发现了很多有关放置动作的示例，但是没有任何示例可以向用户显示正确的反馈。
根据Tree文档，我应该能够在dragOver事件期间调用DragManager.showFeedback(DragManager.NONE) ，但这是行不通的。 以下是一个简短的示例项目。 有什么方法可以在拖动事件中向用户指示放置不会成功吗？
预先感谢您提供任何解决方案！
<?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 个解决方案
解决方案1
2 已采纳 2013-04-18 01:05:56
provides everything necessary to accomplish this, but not quite. 令人沮丧的是，默认的拖放功能提供了完成此操作所需的一切，但还不够。 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>
Flex/AS3 拖放 - 自定义拖放反馈
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.