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>

对于刚刚用拖拽管理器的朋友，这2个例子应该足够了。