У меня есть mx.List и mx.Tree.Я пытаюсь перетащить элементы из списка в дерево, но вместо того, чтобы добавить их в собственно дерево, я просто хочу выяснить, что такое dropTarget в дереве.Переменная dropTarget всегда 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;
, в результате ссылка на нулевой объект ошибка.Кажется странным?
ОБНОВЛЕНИЕ:
(Не уверен, где это лучшее место для публикации, но) Я думаю, что это может быть решением ...
СоздатьПользовательское событие: ItemDragEvent
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>
Наконец, основной код
</fx:Declarations>
<fx:Script>
<![CDATA[
import events.ItemDragEvent;
import itemRenderers.TreeItemRenderer;
import mx.collections.ArrayCollection;
import mx.events.DragEvent;
import mx.events.FlexEvent;
import mx.utils.ObjectUtil;
[Bindable]
private var listData:ArrayCollection = new ArrayCollection([ "One", "Two", "Three" ]);
[Bindable]
private var treeData:Object = { label: "First", children: new ArrayCollection([ { label: "Second" }, { label: "Third" } ]) };
protected function windowedapplication1_initializeHandler(event:FlexEvent):void
{
tree1.addEventListener(ItemDragEvent.DRAG_DROP, treeItemDragDropHandler);
}
protected function treeItemDragDropHandler(event:ItemDragEvent):void
{
event.preventDefault();
trace("ItemDragDrop:", ObjectUtil.toString(event.data));
}
]]>
</fx:Script>
<s:layout>
<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
</s:layout>
<mx:Tree id="list1" width="50%" height="100%"
dataProvider="{listData}" labelField="label"
dragEnabled="true"
dragMoveEnabled="true"
dropEnabled="true" />
<mx:Tree id="tree1" width="50%" height="100%"
dataProvider="{treeData}"
dragEnabled="true"
dropEnabled="true"
showRoot="true"
itemRenderer="itemRenderers.TreeItemRenderer" />
Требуется немного поработать, чтобы разобраться с визуальной обратной связью, но для этого нужно вывести элемент дерева, на который было брошено.