目前遇到一个很头疼的问题,flex中有一个属性叫做“dropEnabled”,根据官方文档的介绍,
是指示被拖起来的项能否被放到该控件上的标志,那么该属性的使用方式就很明确了,但是实际使用貌似有点出入。
Flex中任何组件如group、panel等等都可以用来设置,另外需要做的一步就是在dragEnter中用DragManage来接受数据,
这样就可以把拖动的项拖进目标组件中而不出现“禁止”符号。
但是问题来了,
问题1:“dropEnabled”属性对List的作用刚好相反(指的是从Tree拖动到List中),不设置该属性时可以从Tree中拖入List中,
更加诡异的是在dragEnter的响应函数中获取该属性的值竟然是“true”;
问题2:设置Tree的“dropEnabled”属性为“true”,在多个Tree之间可以轻松拖放,但是却不能从List拖入Tree中,
即便是通过DragManage设置了接受数据也不行。
Tree作为List的子类,两者应该可以很方便的进行交互操作,但是目前遇到的问题实在令人费解。
示例代码如下,有兴趣的人可以研究一下。
<?xml version="1.0" encoding="utf-8"?>
<s:Application 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="800" height="500"
xmlns:list="list.*"
dragEnter="application1_dragEnterHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.DragEvent;
import mx.core.UIComponent;
import mx.events.CollectionEvent;
import mx.events.DragEvent;
import mx.events.FlexEvent;
import mx.managers.DragManager;
protected function application1_dragEnterHandler(event:DragEvent):void
{
// TODO Auto-generated method stub
DragManager.showFeedback(DragManager.COPY);
DragManager.acceptDragDrop(UIComponent(event.currentTarget));
}
protected function list1_dragEnterHandler(event:DragEvent):void
{
// TODO Auto-generated method stub
DragManager.showFeedback(DragManager.COPY);
DragManager.acceptDragDrop(UIComponent(event.currentTarget));
}
protected function panel1_dragEnterHandler(event:DragEvent):void
{
// TODO Auto-generated method stub
DragManager.showFeedback(DragManager.COPY);
DragManager.acceptDragDrop(UIComponent(event.currentTarget));
}
protected function list2_dragEnterHandler(event:DragEvent):void
{
// TODO Auto-generated method stub
DragManager.showFeedback(DragManager.COPY);
DragManager.acceptDragDrop(UIComponent(event.currentTarget));
}
protected function tree1_dragEnterHandler(event:DragEvent):void
{
// TODO Auto-generated method stub
DragManager.showFeedback(DragManager.COPY);
DragManager.acceptDragDrop(UIComponent(event.currentTarget));
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Declarations>
<s:ArrayList id="arr1">
<fx:String>Orange</fx:String>
<fx:String>Apple</fx:String>
<fx:String>Pear</fx:String>
</s:ArrayList>
<s:ArrayList id="arr2">
<fx:String>Banana</fx:String>
</s:ArrayList>
<s:ArrayList id="arr3">
<fx:Object label="Orange"/>
<fx:Object label="Apple"/>
<fx:Object label="Pear"/>
</s:ArrayList>
<fx:XMLList id="treeData">
<node label="Mail Box">
<node label="Inbox">
<node label="Marketing"/>
<node label="Product Management"/>
<node label="Personal"/>
</node>
<node label="Outbox">
<node label="Professional"/>
<node label="Personal"/>
</node>
<node label="Spam"/>
<node label="Sent"/>
</node>
</fx:XMLList>
</fx:Declarations>
<s:Panel title="Drag and Drop Samples" width="100%" height="100%" dragEnter="panel1_dragEnterHandler(event)">
<s:layout>
<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
<mx:Tree dropEnabled="true" dragEnabled="true" dragMoveEnabled="true" labelField="@label" dataProvider="{treeData}">
</mx:Tree >
<mx:Tree dropEnabled="true" dragEnter="tree1_dragEnterHandler(event)"/>
<s:List allowMultipleSelection="true" dragEnabled="true" dragMoveEnabled="true"
dataProvider="{arr1}" dragEnter="list2_dragEnterHandler(event)"></s:List>
<s:Label text="Drag Items between lists" color="0x000000"/>
<s:List allowMultipleSelection="true" dropEnabled="true" dragEnabled="true" dragMoveEnabled="true"
dragEnter="list1_dragEnterHandler(event)"></s:List>
</s:Panel>
</s:Application>