效果图如下:
实现代码:
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var leftArr:ArrayCollection = new ArrayCollection([ {name:"江苏"},{name:"广州"},{name:"北京"},{name:"安徽"},{name:"广西"},{name:"福建"}, {name:"河北"},{name:"武汉"},{name:"湖南"},{name:"河南"},{name:"四川"},{name:"上海"} ]); private var seleIndexs:Vector.<int>; private var seleItems:Vector.<Object>; private function toLeft(event:MouseEvent):void{ seleIndexs = right.selectedIndices; seleItems = right.selectedItems; if(left.dataProvider == null){ left.dataProvider = new ArrayCollection(); } for(var i:int = 0;i < seleItems.length;i++){ left.dataProvider.addItem(seleItems[i]); for(var j:int = 0;j<right.dataProvider.length;j++){ if(right.dataProvider.getItemAt(j).name == seleItems[i].name){ right.dataProvider.removeItemAt(j); break; } } } } private function toRight(event:MouseEvent):void{ seleIndexs = left.selectedIndices; seleItems = left.selectedItems; if(right.dataProvider == null){ right.dataProvider = new ArrayCollection(); } for(var i:int = 0;i < seleItems.length;i++){ right.dataProvider.addItem(seleItems[i]); for(var j:int = 0;j<left.dataProvider.length;j++){ if(left.dataProvider.getItemAt(j).name == seleItems[i].name){ left.dataProvider.removeItemAt(j); break; } } } } ]]> </fx:Script> <s:Panel title="左右互选" width="600" height="500"> <s:Label x="10" y="10" text="当前内容"/> <s:List id="left" dataProvider="{leftArr}" labelField="name" x="10" y="26" width="175" height="427" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" allowMultipleSelection="true" doubleClickEnabled="true" doubleClick="toRight(event)"/> <s:Button x="219" y="197" label="->>" click="toRight(event)"/> <s:Button x="219" y="159" label="<<-" click="toLeft(event)"/> <s:Label x="299" y="10" text="拖拽内容"/> <s:List id="right" labelField="name" x="299" y="26" width="168" height="425" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" allowMultipleSelection="true" doubleClickEnabled="true" doubleClick="toLeft(event)"/> </s:Panel> </s:Application>