10.4.在List 之間進行拖拽操作

2024-04-27 13:52:09

字體：大中小

來源：轉載

供稿：網友

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/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>