10.4.在List 之間進(jìn)行拖拽操作

2024-04-27 13:52:09

字體：大中小

供稿：網(wǎng)友

10.4.1 問題
你希望從一個(gè)List 中拖拽數(shù)據(jù)到另一個(gè)List。
10.4.2 解決辦法
使用List 內(nèi)建的拖拽管理器并把每個(gè)組件設(shè)置成允許接受拖拽操作。
10.4.3 討論
Flex 列表類控件內(nèi)建的拖拽管理器，去掉了手動(dòng)操作DragManager 對(duì)象的必要，從而使數(shù)據(jù)從一個(gè)List 移動(dòng)到另一個(gè)List 變得相對(duì)簡單。通過設(shè)置dragEnabled 和dropEnabled屬性為true，你就能打開移動(dòng)和復(fù)制拖拽源數(shù)據(jù)的內(nèi)置操作。

當(dāng)需要在兩個(gè)List 之間進(jìn)行雙向拖拽的時(shí)候，這兩個(gè)List 都必須設(shè)置成允許接受拖拽操作。

當(dāng)拖拽發(fā)起者和拖放目標(biāo)具有相同基類的時(shí)候，例如兩個(gè)List，拖拽源數(shù)據(jù)的結(jié)構(gòu)對(duì)成功完成拖拽操作來說并不重要，因?yàn)檫@兩個(gè)控件使用相同的條目渲染器來渲染數(shù)據(jù)。當(dāng)需要在不同類型的列表類控件之間實(shí)現(xiàn)單向或雙向拖拽操作的時(shí)候，例如一個(gè)List 和一個(gè)DataGrid，你需要考慮拖拽源數(shù)據(jù)的結(jié)構(gòu)，因?yàn)檫@兩個(gè)控件使用不同的條目渲染器，呈現(xiàn)的方式不一樣。

在本示例中，我們?cè)试S用戶從一個(gè)List 移動(dòng)條目到一個(gè)DataGrid，在DataGrid 中顯示條目的完整信息。

-XML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="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="200" height="200">
<mx:List id="contactList" width="100%" height="100%"
dragEnabled="true" dropEnabled="true" dragMoveEnabled="false" />
</mx:Panel>
<mx:Panel title="Contact Info:" width="300" height="200">
<mx:DataGrid id="contactGrid" width="100%" height="100%"
dragEnabled="true" dropEnabled="true" dragMoveEnabled="true">
<mx:columns>
<mx:DataGridColumn dataField="label" headerText="Name"/>
<mx:DataGridColumn dataField="phone" headerText="Phone"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>