Apache flex 找出Flex中已放置到的树项
我有一个mx.List和一个mx.Tree。我试图将项目从列表拖到树上,但不是让它们添加到实际的树上,我只是想知道树上的dropTarget是什么。dropTarget变量始终为Apache flex 找出Flex中已放置到的树项,apache-flex,list,drag-and-drop,tree,components,Apache Flex,List,Drag And Drop,Tree,Components,我有一个mx.List和一个mx.Tree。我试图将项目从列表拖到树上,但不是让它们添加到实际的树上,我只是想知道树上的dropTarget是什么。dropTarget变量始终为null protected function sparkTree_dragDropHandler(event:DragEvent):void { var source:* = event.dragInitiator; var target:* = event.currentTarget; tr
null
protected function sparkTree_dragDropHandler(event:DragEvent):void
{
var source:* = event.dragInitiator;
var target:* = event.currentTarget;
trace("Dragged......", source.selectedItem.label);
trace("From.........", source.name);
trace("To...........", event.currentTarget.name);
trace("Target Item..", event.currentTarget.dropTarget);
}
输出:
Dragged...... itemOne
From......... _Main_Tree2
To........... _Main_Tree1
Target Item.. null
所以我只是想澄清一下,我正试图得到物品被扔到的物体
作为旁注,使用:
var source:List = event.dragInitiator as List;
var target:List = event.currentTarget as List;
导致空对象引用错误。看起来很奇怪
更新: (不确定在哪里张贴这篇文章是最好的,但)我认为这可能是解决方案 创建自定义事件:ItemDrageEvent
package events
{
import mx.core.DragSource;
import mx.core.IUIComponent;
import mx.events.DragEvent;
public class ItemDragEvent extends DragEvent
{
public static const DRAG_DROP:String = "itemDragDrop";
public static const DRAG_ENTER:String = "itemDragEnter";
public static const DRAG_EXIT:String = "itemDragExit";
public var item:Object;
public var data:Object;
public var index:Object;
public function ItemDragEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=true, dragInitiator:IUIComponent=null, dragSource:DragSource=null, action:String=null, ctrlKey:Boolean=false, altKey:Boolean=false, shiftKey:Boolean=false)
{
super(type, bubbles, cancelable, dragInitiator, dragSource, action, ctrlKey, altKey, shiftKey);
}
}
}
创建mx.Tree项渲染器:TreeItemRenderer
<?xml version="1.0" encoding="utf-8"?>
<s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
dragEnter="dragEnterHandler(event)"
dragExit="dragExitHandler(event)"
dragDrop="dragDropHandler(event)"
>
<fx:Script>
<![CDATA[
import events.ItemDragEvent;
import mx.core.IUIComponent;
import mx.events.DragEvent;
import mx.managers.DragManager;
protected function dragEnterHandler(event:DragEvent):void
{
DragManager.acceptDragDrop(event.currentTarget as IUIComponent);
var e:ItemDragEvent = new ItemDragEvent(ItemDragEvent.DRAG_ENTER, true);
e.data = data;
e.item = data;
e.index = itemIndex;
dispatchEvent(e);
trace("TreeItemRenderer, dragEnterHandler");
}
protected function dragExitHandler(event:DragEvent):void
{
var e:ItemDragEvent = new ItemDragEvent(ItemDragEvent.DRAG_EXIT, true);
e.data = data;
e.item = data;
e.index = itemIndex;
dispatchEvent(e);
trace("TreeItemRenderer, dragExitHandler");
}
protected function dragDropHandler(event:DragEvent):void
{
DragManager.acceptDragDrop(event.currentTarget as IUIComponent);
var e:ItemDragEvent = new ItemDragEvent(ItemDragEvent.DRAG_DROP, true);
e.data = data;
e.item = data;
e.index = itemIndex;
dispatchEvent(e);
trace("TreeItemRenderer, dragDropHandler");
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:HGroup left="0" right="0" top="0" bottom="0" verticalAlign="middle">
<s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0">
<s:fill>
<s:SolidColor color="0xFFFFFF" />
</s:fill>
</s:Rect>
<s:Group id="disclosureGroup">
<s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" />
</s:Group>
<s:BitmapImage source="{treeListData.icon}" />
<s:Label id="labelField" text="{treeListData.label}" paddingTop="2"/>
</s:HGroup>
</s:MXTreeItemRenderer>
最后是主代码
需要做一些工作来整理视觉反馈,但这应该会输出掉到的树项目。关于
var source:List = event.dragInitiator as List;
var target:List = event.currentTarget as List;
尝试检查您的导入。可能有导入的Spark列表,但您使用的是MX列表?:)
关于dropTarget
属性,请参阅。它与Flex拖放功能无关。所以这个属性的值为null也就不足为奇了
一般来说,您可以使用以下代码段,它不能解决所有问题(我没有时间调试所有方面),但可以为您提供一些良好的起点:
<?xml version="1.0" encoding="utf-8"?>
<s:Application minHeight="600" minWidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.collections.ICollectionView;
import mx.events.DragEvent;
import mx.managers.DragManager;
[Bindable]
private var listDataProvider:ArrayCollection = new ArrayCollection([ "First", "Second", "Third" ]);
[Bindable]
private var treeDataProvider:Object =
{ label: "First", children: new ArrayCollection([ { label: "Second" }, { label: "Third" } ]) };
protected function list_dragCompleteHandler(event:DragEvent):void
{
if (event.relatedObject == tree)
{
event.preventDefault();
if (event.action == DragManager.MOVE && list.dragMoveEnabled)
{
var items:Array = event.dragSource.dataForFormat("items") as Array;
var collection:ArrayCollection = list.dataProvider as ArrayCollection;
for each (var item:Object in items)
{
if (collection.contains(item))
collection.removeItemAt(collection.getItemIndex(item));
}
}
}
}
protected function tree_dragDropHandler(event:DragEvent):void
{
var source:List = List(event.dragInitiator);
var target:Tree = Tree(event.currentTarget);
trace("Dragged......", source.selectedItem);
trace("From.........", source.name);
trace("To...........", target.name);
event.preventDefault();
tree.hideDropFeedback(event);
var index:int = tree.calculateDropIndex(event);
var items:Array = new Array();
if (event.dragSource.hasFormat("treeItems"))
items = items.concat(event.dragSource.dataForFormat("treeItems") as Array);
if (event.dragSource.hasFormat("items"))
items = items.concat(event.dragSource.dataForFormat("items") as Array);
if (index > (tree.dataProvider as ICollectionView).length)
index = (tree.dataProvider as ICollectionView).length;
for each (var item:Object in items)
{
var obj:Object = new Object()
obj.label = item;
(tree.dataProvider as ArrayCollection).addItemAt(obj, index);
}
}
protected function tree_dragEnterHandler(event:DragEvent):void
{
if (event.dragInitiator == list)
{
event.preventDefault();
DragManager.acceptDragDrop(event.target as Tree);
tree.showDropFeedback(event);
}
}
protected function tree_dragExitHandler(event:DragEvent):void
{
event.preventDefault();
tree.hideDropFeedback(event);
}
protected function tree_dragOverHandler(event:DragEvent):void
{
if (event.dragInitiator == list)
{
event.preventDefault();
tree.showDropFeedback(event);
}
}
]]>
</fx:Script>
<s:layout>
<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
</s:layout>
<mx:List dataProvider="{listDataProvider}" dragComplete="list_dragCompleteHandler(event)" dragEnabled="true"
dragMoveEnabled="true" dropEnabled="true" id="list" width="200" />
<mx:Tree dataProvider="{treeDataProvider}" dragDrop="tree_dragDropHandler(event)" dragEnabled="true"
dragEnter="tree_dragEnterHandler(event)" dragExit="tree_dragExitHandler(event)"
dragOver="tree_dragOverHandler(event)" dropEnabled="true" id="tree" showRoot="true" width="200" />
</s:Application>
(tree.dataProvider作为ICollectionView).length)
索引=(tree.dataProvider作为ICollectionView).length;
对于每个(变量项:项中的对象)
{
var obj:Object=新对象()
obj.label=项目;
(tree.dataProvider作为ArrayCollection).addItemAt(obj,索引);
}
}
受保护的功能树\u dragEnterHandler(事件:DragEvent):无效
{
if(event.draginInitiator==列表)
{
event.preventDefault();
DragManager.acceptDragDrop(作为树的event.target);
树。showDropFeedback(事件);
}
}
受保护的函数树\u dragExitHandler(事件:DrageEvent):void
{
event.preventDefault();
hideDropFeedback(事件);
}
受保护的功能树\u dragOverHandler(事件:DragEvent):无效
{
if(event.draginInitiator==列表)
{
event.preventDefault();
树。showDropFeedback(事件);
}
}
]]>
@Constantiner是的<代码>变量源:mx.controls.List=event.draginInitiator作为mx.controls.List;变量目标:mx.controls.List=event.currentTarget作为mx.controls.List代码>旁注的答案是正确的,而不是关键问题。@Constantiner我文章的主要焦点是发现树/列表组件中的哪个元素被放到了-我还没有答案。作为我在将event.draginInitiator
和event.currentTarget
转换为列表时提到的一个旁注,我得到了一个错误(第一个代码块将它们设置为非类型化)。你对旁注的回答是正确的,但是这篇文章的重点是找出Flex中哪个树项目被删除了,这一点仍然没有得到回答。
<?xml version="1.0" encoding="utf-8"?>
<s:Application minHeight="600" minWidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.collections.ICollectionView;
import mx.events.DragEvent;
import mx.managers.DragManager;
[Bindable]
private var listDataProvider:ArrayCollection = new ArrayCollection([ "First", "Second", "Third" ]);
[Bindable]
private var treeDataProvider:Object =
{ label: "First", children: new ArrayCollection([ { label: "Second" }, { label: "Third" } ]) };
protected function list_dragCompleteHandler(event:DragEvent):void
{
if (event.relatedObject == tree)
{
event.preventDefault();
if (event.action == DragManager.MOVE && list.dragMoveEnabled)
{
var items:Array = event.dragSource.dataForFormat("items") as Array;
var collection:ArrayCollection = list.dataProvider as ArrayCollection;
for each (var item:Object in items)
{
if (collection.contains(item))
collection.removeItemAt(collection.getItemIndex(item));
}
}
}
}
protected function tree_dragDropHandler(event:DragEvent):void
{
var source:List = List(event.dragInitiator);
var target:Tree = Tree(event.currentTarget);
trace("Dragged......", source.selectedItem);
trace("From.........", source.name);
trace("To...........", target.name);
event.preventDefault();
tree.hideDropFeedback(event);
var index:int = tree.calculateDropIndex(event);
var items:Array = new Array();
if (event.dragSource.hasFormat("treeItems"))
items = items.concat(event.dragSource.dataForFormat("treeItems") as Array);
if (event.dragSource.hasFormat("items"))
items = items.concat(event.dragSource.dataForFormat("items") as Array);
if (index > (tree.dataProvider as ICollectionView).length)
index = (tree.dataProvider as ICollectionView).length;
for each (var item:Object in items)
{
var obj:Object = new Object()
obj.label = item;
(tree.dataProvider as ArrayCollection).addItemAt(obj, index);
}
}
protected function tree_dragEnterHandler(event:DragEvent):void
{
if (event.dragInitiator == list)
{
event.preventDefault();
DragManager.acceptDragDrop(event.target as Tree);
tree.showDropFeedback(event);
}
}
protected function tree_dragExitHandler(event:DragEvent):void
{
event.preventDefault();
tree.hideDropFeedback(event);
}
protected function tree_dragOverHandler(event:DragEvent):void
{
if (event.dragInitiator == list)
{
event.preventDefault();
tree.showDropFeedback(event);
}
}
]]>
</fx:Script>
<s:layout>
<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
</s:layout>
<mx:List dataProvider="{listDataProvider}" dragComplete="list_dragCompleteHandler(event)" dragEnabled="true"
dragMoveEnabled="true" dropEnabled="true" id="list" width="200" />
<mx:Tree dataProvider="{treeDataProvider}" dragDrop="tree_dragDropHandler(event)" dragEnabled="true"
dragEnter="tree_dragEnterHandler(event)" dragExit="tree_dragExitHandler(event)"
dragOver="tree_dragOverHandler(event)" dropEnabled="true" id="tree" showRoot="true" width="200" />
</s:Application>