Flex4学习笔记-左右上拉框的使用,支持双击,单击,拖拽等功能

Flex4学习笔记-左右下拉框的使用,支持双击,单击,拖拽等功能

?

下面是具体代码实现:

?

<?xml version="1.0" encoding="utf-8"?>   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="450" height="350" creationComplete="initApp()" backgroundColor="#FFFFFF" fontSize="12">    <mx:Script>   <![CDATA[   import mx.events.ScrollEvent;   import mx.rpc.events.FaultEvent;      import mx.rpc.events.ResultEvent;    import mx.controls.Alert;    import mx.collections.ArrayCollection;    private function initApp():void{   left.dataProvider=['广东','广西','内蒙古','北京','上海','江苏','江西','湖南','湖北','四川','西藏','新疆'];   right.dataProvider=[];   }   private function toRight():void  {   var selectItems:Array = left.selectedItems;   var selectIndexs:Array = left.selectedIndices;   Alert.show(selectItems.toString()+"---"+left.selectedIndices.toString());   if(right.dataProvider == null)    {    right.dataProvider = new ArrayCollection();    }    for( var i:Number = 0 ; i < selectItems.length ; i++ )   {   ArrayCollection(right.dataProvider).addItem(selectItems[i].toString());    ArrayCollection(left.dataProvider).removeItemAt(selectIndexs[i]);   }   }   private function toLeft():void  {   var selectItems:Array = right.selectedItems;   var selectIndexs:Array = right.selectedIndices;   //Alert.show(selectItems.toString()+"---"+left.selectedIndices.toString());   if(left.dataProvider == null)    {    left.dataProvider = new ArrayCollection();    }    for( var i:Number = 0 ; i < selectItems.length ; i++ )   {   ArrayCollection(left.dataProvider).addItem(selectItems[i].toString());    ArrayCollection(right.dataProvider).removeItemAt(selectIndexs[i]);   }   }   ]]>   </mx:Script>   <mx:Panel x="0" y="0" width="450" height="350" layout="absolute" title="左右互选">   <mx:Label x="7" y="3" text="当前内容"/>   <mx:List x="7" y="25" id="left" width="168" height="275" allowMultipleSelection="true"     dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" doubleClickEnabled="true" itemDoubleClick="toRight()">    </mx:List>   <mx:Label x="243" y="3" text="移动内容"/>   <mx:List x="243" y="25" id="right" width="180" height="272" allowMultipleSelection="true"     dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" doubleClickEnabled="true" itemDoubleClick="toLeft()">    </mx:List>   <mx:Button x="183" y="121" label="-&gt;&gt;" click="toRight()" id="bt_r" width="52"/>   <mx:Button x="183" y="178" label="&lt;&lt;-" click="toLeft()" id="bt_l" width="52"/>   </mx:Panel>   </mx:Application>  

?

?

下面是运行的效果：

?

?