Flex之拖放行为(1) ------ 列表类控件的拖放

1.一个方向的拖放：

代码如下：

<?xml version="1.0" encoding="utf-8"?> <!-- dragdrop/SimpleListToListMove.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp();"> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; private function initApp():void { srclist.dataProvider = new ArrayCollection(['读书', '看电视', '做运动', '逛街', '种菜']); destlist.dataProvider = new ArrayCollection([]); } ]]--> </mx:Script> <mx:Panel title="拖动选项示例" width="90%" height="90%" horizontalAlign="center" verticalAlign="middle"> <mx:HBox> <mx:VBox> <mx:Label text="可供选择的行为"/> <mx:List id="srclist" allowMultipleSelection="true" dragEnabled="true" dragMoveEnabled="true"/> </mx:VBox> <mx:VBox> <mx:Label text="所选择的行为"/> <mx:List id="destlist" dropEnabled="true"/> </mx:VBox> </mx:HBox> </mx:Panel> </mx:Application>

2.两个方向的拖放：

<?xml version="1.0" encoding="utf-8"?> <!-- dragdrop/SimpleDGToDG.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp();"> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; private function initApp():void { srcgrid.dataProvider = new ArrayCollection([ {摄影师:'Carole King', 照片:'Tapestry', 价格:11.99}, {摄影师:'Paul Simon', 照片:'Graceland', 价格:10.99}, {摄影师:'Original Cast', 照片:'Camelot', 价格:12.99}, {摄影师:'The Beatles', 照片:'The White', 价格:11.99} ]); destgrid.dataProvider = new ArrayCollection([]); } ]]--> </mx:Script> <mx:Panel title="数据列表拖放示例" width="90%" height="90%" horizontalAlign="center" verticalAlign="middle"> <mx:HBox> <mx:VBox> <mx:Label text="列表1"/> <mx:DataGrid id="srcgrid" allowMultipleSelection="true" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"> <mx:columns> <mx:DataGridColumn dataField="摄影师"/> <mx:DataGridColumn dataField="照片"/> <mx:DataGridColumn dataField="价格"/> </mx:columns> </mx:DataGrid> </mx:VBox> <mx:VBox> <mx:Label text="列表2"/> <mx:DataGrid id="destgrid" allowMultipleSelection="true" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"> <mx:columns> <mx:DataGridColumn dataField="摄影师"/> <mx:DataGridColumn dataField="照片"/> <mx:DataGridColumn dataField="价格"/> </mx:columns> </mx:DataGrid> </mx:VBox> </mx:HBox> </mx:Panel> </mx:Application>

3.同一个控件上的拖放：

<?xml version="1.0" encoding="utf-8"?> <!-- dragdrop/SimpleTreeSelf.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <!--[CDATA[ // 初始化树结构数据源。 private function initApp():void { firstList.dataProvider = treeDP; } ]]--> </mx:Script> <mx:XML id="treeDP"> <node label="邮件"> <node label="收件箱"/> <node label="个人信箱"> <node label="示例"/> <node label="隐私"/> <node label="保存"/> <node label="信息"/> </node> <node label="日历"/> <node label="发出"/> <node label="垃圾箱"/> </node> </mx:XML> <mx:Panel title="树结构拖动示例" width="90%" height="90%" horizontalAlign="center" verticalAlign="middle"> <mx:Tree id="firstList" width="90%" height="80%" showRoot="false" labelField="@label" dragEnabled="true" dropEnabled="true" allowMultipleSelection="true" creationComplete="initApp();"/> </mx:Panel> </mx:Application>