List容器间 拖放对象，Flex程序还真幸福啊！

在FLex，List与List容器间，都已经 封装好了，只需要设置几个属性，就可以实现 ListItem 相互拖拽数据，非常方便啊

想起 C#里不知要多少代码才能解决这些问题，尤其还要拖放排序。

Flex程序还挺幸福的，事件都 dispatchEvent 解决了，呵呵。

国际惯例，看图先：

 

当然，还加了，相同小图标，窗口模式，操作模式就加了个 等待时候的钟摆，

 

另外自定义 锁定 拖入，拖出功能。

核心代码大概如此：

<?xml version="1.0" encoding="utf-8"?>
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="initApp()">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        s|ButtonBar s|ButtonBarButton:upAndSelected,
        s|ButtonBar s|ButtonBarButton:overAndSelected,
        s|ButtonBar s|ButtonBarButton:downAndSelected,
        s|ButtonBar s|ButtonBarButton:disabledAndSelected {
            chromeColor: #663366;
            color: #9999CC;
        }
        s|ButtonBar { 
            chromeColor: #9999CC;
            color: #663366;
        }
        s|CheckBox { 
            chromeColor: #ffffff;
            color: #ffffff;
            fontSize:14;
        }
    </fx:Style>
    
    <fx:Script>
        <![CDATA[
            import com.effect.BottomTip;
            import com.effect.BottomWindow;
            
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.events.DragEvent;
            import mx.events.ItemClickEvent;
            import mx.managers.DragManager;
            
            import render.iconItem;
            import render.iconItem2;
            import render.iconItem3;
            import render.iconItem4;
            
            import spark.components.Button;
            import spark.components.RichText;
            import spark.components.supportClasses.ItemRenderer;
            import spark.events.IndexChangeEvent;
            
            
            [Bindable]
            private var data1:ArrayCollection = new ArrayCollection();
            
            [Embed(source="assets/apps/images/6.jpg")]
            [Bindable]
            public var backImg:Class;
            
            protected function initApp():void{
                
                var item:Object;
                var i:int = 0;
                for(;i<12;i++){
                    item = new Object();
                    item.iconID= i;
                    item.appName = "应用程序"  + i;
                    data1.addItem(item);
                }                
                
            }            
            
            protected function list2_dragCompleteHandler(event:DragEvent):void
            {
                // TODO Auto-generated method stub
                new BottomTip(this).showMsg("已激活程序！！");
            }
            
            protected function buttonbar1_changeHandler(evt:IndexChangeEvent):void
            {
                
                // TODO Auto-generated method stub
                
                var btnBar:ButtonBar = evt.target as ButtonBar;
                
                if(btnBar.selectedIndex == -1)
                    return;
                
                var rend:IFactory = null;
                
                switch ( btnBar.selectedItem.data )
                {
                    case "Button1": 
                        rend = new ClassFactory(iconItem);
                        break;
                    case "Button2":
                        rend = new ClassFactory(iconItem2);
                        break;
                    case "Button3":
                        rend = new ClassFactory(iconItem3);
                        break;
                    case "Button4":
                        rend = new ClassFactory(iconItem4);
                        break;
                }
                if(rend != null)
                    list2.itemRenderer = rend; 
                
            }
            
            protected function list2_dragOverHandler(event:DragEvent):void
            {
                // TODO Auto-generated method stub
                var msg:String = !list2dropEnabled?"无权限此操作！":"允许此此操作！";
                new BottomTip(this).showMsg(msg);
            }
            
        ]]>
    </fx:Script>
    
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:LinearGradient rotation="30">
                <s:GradientEntry color="#185d9b" ratio="0" />
                <s:GradientEntry color="#85d7ee" ratio="0.6" />
                <s:GradientEntry color="#85d7ee" ratio="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <s:Image x="0" y="0" source="{backImg}" />
    
    
    <s:Group x="10" y="10" width="399" >
        
        <s:List id="list1" x="10"  width="100%" itemRenderer="render.iconItem" dataProvider="{data1}" dragMoveEnabled="true" dropEnabled="true" 
                dragEnabled="true" skinClass="skins.skinList">
            <s:layout><s:TileLayout horizontalGap="20" verticalGap="10" orientation="rows"/></s:layout>
        </s:List>
        
    </s:Group>
    
    <s:Group id="accptPanel" x="451" y="10" width="578" height="557" >
        <s:Rect top="0" right="0" bottom="0" left="0">
            <s:stroke>
                <s:SolidColorStroke color="0xffffff" weight="2" />
            </s:stroke>
        </s:Rect>        
        
        <s:List id="list2" width="100%" height="100%" dragMoveEnabled="true" dropEnabled="true" dragEnabled="true"
                itemRenderer="render.iconItem2"  skinClass="skins.skinList2" dragDrop="list2_dragCompleteHandler(event)"  >
            <s:layout><s:TileLayout horizontalGap="20" paddingTop="8" paddingLeft="8" paddingRight="8" paddingBottom="8" verticalGap="10" orientation="rows"/></s:layout>
        </s:List>
        
        <s:HGroup width="100%" bottom="0" verticalAlign="bottom" horizontalAlign="center">
            <s:ButtonBar  change="buttonbar1_changeHandler(event)" >
                <s:ArrayCollection>
                    <fx:Object data="Button1" label="小图标" />
                    <fx:Object data="Button2" label="大图标" />
                    <fx:Object data="Button3" label="窗口模式" />
                    <fx:Object data="Button4" label="操作模式" />
                </s:ArrayCollection>
            </s:ButtonBar>
            <s:CheckBox id="list2dragEnabled" change="list2.dragEnabled = !list2.dragEnabled;" label="锁定拖出"  />
            <s:CheckBox id="list2dropEnabled" change="list2.dropEnabled = !list2.dropEnabled;" label="锁定拖入" />
        </s:HGroup>
        
    </s:Group>
    
    
</s:Module>

这只是一个简单的练习思路，有基础的话，到这里你已经做得出来了。