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个例子应该足够了。