Flex 拖拽范例

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

<?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等，下面则是一个定制化的例子：

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