Flex 拖拽范例

Adobe Flash Builder 4 简体中文正式版 Windows版点击下载:http://g.csdn.net/5134151

Adobe Flash Builder 4 简体中文正式版 Mac版点击下载 ：http://g.csdn.net/5134152
 

Flex由于在其Framwork里加入了DragDrop管理器，可以使得开发者在Flex应用中实现类似桌面的效果，默认情况下，Flex的拖拽管理器是针对List等控件的，实现这类控件之间的Item拖拽非常容易。下面是一个很简单的小例子：



view plaincopy to clipboardprint?

<?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" 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>

 



__________________________________________________________________________



但是，拖拽管理器还能定制化到特定的控件之上，比如Image，Datagrid等，下面则是一个定制化的例子：



view plaincopy to clipboardprint?

<?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='../assets/056.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='../assets/057.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='../assets/059.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>