两个 flex拖拽 案例

<?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[   
    private function initApp():void{     
     words.dataProvider=['Water','水','Car','汽车','House','房屋','Book','书籍','Music','音乐',
     'Sandwich','三明治']; english.dataProvider=[]; chinese.dataProvider=[];   
    }
    ]]>
  </mx:Script> 
  
  <mx:Panel x="0" y="0" width="450" height="350" layout="absolute" title="Sort Words By Language">   
   <mx:Label x="7" y="3" text="Drag to Correct Language"/>   
   <mx:List x="7" y="25" id="words" width="200" height="275" allowMultipleSelection="true" dragEnabled="true"></mx:List>   
   <mx:Label x="223" y="6" text="English"/>   
   <mx:List x="223" y="25" id="english" width="200" height="120" dropEnabled="true"></mx:List>   
   <mx:Label x="223" y="150" text="中文"/> 
   <mx:List x="223" y="177" id="chinese" width="200" height="120" dropEnabled="true"></mx:List> 
  </mx:Panel>
  
</mx:Application>

效果图：

 

 

 

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="400" backgroundColor="#FFFFFF"
creationComplete="initApp()" layout="absolute">
  <mx:Script>  
    <![CDATA[     
    import mx.controls.DataGrid;     
    import mx.controls.Image;     
    import mx.collections.ArrayCollection;     
    import mx.events.DragEvent;     
    import mx.managers.DragManager;     
    import mx.core.DragSource;     
    [Bindable]     
    public var total:Number=0;     
    [Bindable]     
    public var cartContents:ArrayCollection;     
    private function initApp():void{       
     this.cartContents=new ArrayCollection();
    }     
    private function dragIt(event:MouseEvent,name:String,price:Number):void{
      //CurrentTarget指定要实现拖拽事件的初始化目标       
      var dragInitiator:Image=event.currentTarget as Image;       
      //指定一个dragSource来包括拖拽过程中包含的数据的对象       
      var dragSource:DragSource=new DragSource();       
      //向对象添加数据       
      dragSource.addData(name,'name');       
      dragSource.addData(price,'price');       
      //创建一个拖拽对象的代理作为拷贝       
      var dragProxy:Image=new Image();      
      dragProxy.source=event.currentTarget.source;       
      //使用DragManager静态方法doDrag开始拖拽       
      DragManager.doDrag(dragInitiator,dragSource,event,dragProxy);     
    }     
    private function dragEnterHandler(event:DragEvent):void{
            var dropTarget:DataGrid=event.currentTarget as DataGrid;       
            if (event.dragSource.hasFormat('name') && event.dragSource.hasFormat('price')){
                      DragManager.acceptDragDrop(dropTarget);
             }     
    }     
    private function dragDropHandler(event:DragEvent):void{       
      var name:String= String(event.dragSource.dataForFormat('name'));       
      var price:Number=Number(event.dragSource.dataForFormat('price'));       
      this.cartContents.addItem({name:String(event.dragSource.dataForFormat('name'))
      ,price:String(event.dragSource.dataForFormat('price'))});       
      total+=price;     
   }   
   ]]> 
  </mx:Script> 
   <mx:Canvas x="19" y="10"> 
   <mx:Image x="23" y="35" width="64" height="64" mouseMove="dragIt(event,'Dreamweaver',499);" source="@Embed(source='../images/01.png')"/>
   <mx:Label x="41" y="107" text="499"/> 
   <mx:Image x="23" y="133" width="64" height="64" mouseMove="dragIt(event,'Fireworks',299);"  source="@Embed(source='../images/02.png')"/> 
   <mx:Label x="41" y="205" text="299"/> 
   <mx:Image x="23" y="231" width="64" height="64" mouseMove="dragIt(event,'Flash',599);" source="@Embed(source='../images/03.png')"/> 
   <mx:Label x="41" y="303" text="599"/> 
  </mx:Canvas> 
  <mx:Label x="210" y="61" text="购物篮" fontSize="12"/> 
  <mx:DataGrid x="129.5" y="102" id="cart" dataProvider="{cartContents}" dragEnter="dragEnterHandler(event);" dragDrop="dragDropHandler(event);" height="165" fontSize="12">   
  <mx:columns>     
  <mx:DataGridColumn headerText="产品" dataField="name"/>     
  <mx:DataGridColumn headerText="价格" dataField="price"/>   
  </mx:columns> 
  </mx:DataGrid> 
  <mx:Label x="186" y="292" text="总计：{total}" fontSize="12"/> 
  <mx:Label x="129.5" y="0" text="拖拽物品放入购物篮中" fontSize="12"/> 
  <mx:HRule x="5" y="20" width="390"/> 
 </mx:Application>

效果图：