Flex List篇之一（实现左右多选框的拖拽、按钮左右点击，双击选择，左右互选）

效果图如下：

实现代码：

<?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="-&gt;&gt;" click="toRight(event)"/>
        <s:Button x="219" y="159" label="&lt;&lt;-" 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>