10.4.在List 之间进行拖拽操作

10.4.1 问题
你希望从一个List 中拖拽数据到另一个List。
10.4.2 解决办法
使用List 内建的拖拽管理器并把每个组件设置成允许接受拖拽操作。
10.4.3 讨论
Flex 列表类控件内建的拖拽管理器,去掉了手动操作DragManager 对象的必要,从而使数据从一个List 移动到另一个List 变得相对简单。通过设置dragEnabled 和dropEnabled属性为true,你就能打开移动和复制拖拽源数据的内置操作。

当需要在两个List 之间进行双向拖拽的时候,这两个List 都必须设置成允许接受拖拽操作。

当拖拽发起者和拖放目标具有相同基类的时候,例如两个List,拖拽源数据的结构对成功完成拖拽操作来说并不重要,因为这两个控件使用相同的条目渲染器来渲染数据。当需要在不同类型的列表类控件之间实现单向或双向拖拽操作的时候,例如一个List 和一个DataGrid,你需要考虑拖拽源数据的结构,因为这两个控件使用不同的条目渲染器,呈现的方式不一样。

在本示例中,我们允许用户从一个List 移动条目到一个DataGrid,在DataGrid 中显示条目的完整信息。
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxmllayout="horizontal"
creationComplete="creationHandler();">

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private function creationHandler():void {
contactList.dataProvider = new ArrayCollection([{label:'Josh Noble', phone:'555.111.2222'},{label:'Todd Anderson', phone:'555.333.4444'},
{label:'Abey George', phone:'555.777.8888'}]);}

]]>
</mx:Script>
<mx:Panel title="Contact List:width="200height="200">
<mx:List id="contactListwidth="100%height="100%"
dragEnabled="truedropEnabled="truedragMoveEnabled="false" />

</mx:Panel>
<mx:Panel title="Contact Info:width="300height="200">
<mx:DataGrid id="contactGridwidth="100%height="100%"
dragEnabled="truedropEnabled="truedragMoveEnabled="true">

<mx:columns>
<mx:DataGridColumn dataField="labelheaderText="Name"/>
<mx:DataGridColumn dataField="phoneheaderText="Phone"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>

一些包含label 属性和phone 属性的对象被添加到ArrayCollection 对象中。当把该ArrayCollection 赋给List 实例的dataProvider 属性后,List 上会显示每个label 属性。

从List 中拖动条目到DataGrid 中的时候,数据被复制了,拖拽源对象的label 属性和phone属性则会显示在DataGrid 中。

由于这两个列表类控件的dropEnabled 属性都被设置为true,所以该例子示范了一个双向拖拽的系统。

加支付宝好友偷能量挖...


评论(0)网络
阅读(70)喜欢(0)flash/flex/fcs/AIR