前言

Flex?框架的拖拽能力允许用户可视化地从一个地方移动数据到另一个地方，这大大增强了?富互联网应用程序的体验性。任何扩展了?mx.core.UIComponent?类的组件都支持拖拽。在一个拖拽操作中，有一个初始方(initiator)?和一个接收方(receiver)?。任何一个?UIComponent?的实例都能接受由拖拽动作初始的释放操作。一些列表类的Flex组件，如?List?、?Tree?和?DataGrid?，具有管理拖拽操作的内置支持。这实现了从一个地方移动数据到另一个地方和组件本身的过程的自动化。我们这里要讨论的是一个没有内置自动化拖拽组件的实现拖拽的过程。

相关概念

DragManager

位于?mx.managers?包中，?DragManager?类用于管理在你的程序里执行的拖拽操作。

DragSource

位于?mx.core?包中，是?Flex?框架中的核心成员，处理拖拽中的数据传递

DragEvent

位于?mx.events?包中，拖拽操作中的事件对象。

按照逻辑，拖拽中至少有两个对象：一方提供数据，一方接收数据。

?

提供数据

mouseDown???????鼠标按下。

mouseMove????????鼠标移动。

dragComplete?????鼠标释放。判断目标是否接受数据，如果可以，拖放成功。

接收方阶段

dragEnter?????????被拖动对象移动到目标范围中。

dragDrop??????????鼠标在目标上松开。

dragOver??????????鼠标移动到目标上。

dragExit????????????独享被拖离目标范围。

?

基本流程

1.???????在数据提供方监听鼠标事件

a)?????????初始化?DragSource?，把需要传递的数据使用?addData?的方式添加进?DragSource

b)?????????把拖拽源和?DragSource?通过静态方法?doDrag?增加到?DragManager?。

2.???????监听目标组件的?dragEnter?事件

a)?????????判断?DragSource?与释放目标的?format?是否一致

b)?????????如果?format?类型一致则使用?DragManager?的静态方法?acceptDragDrop?允许目标组件接收拖拽。

3.???????监听目标组件的?dragDrop?事件

a)?????????取得拖拽时?DragSource?中的数据，进行操作。

?

示例代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
	
	<mx:Script>
		<!--[CDATA[
			import mx.core.IUIComponent;
			import mx.events.DragEvent;
			import mx.managers.DragManager;
			import mx.collections.ArrayCollection;
			import mx.core.DragSource;
			[Bindable]
			private var myListDP:ArrayCollection=new ArrayCollection();
			
			private function dragIt(initator:Label,dsData:String,event:MouseEvent,format:String):void{
				var ds:DragSource=new DragSource(); //拖拽源
				ds.addData(dsData,format);//数据赋值给DragSource
				DragManager.doDrag(initator,ds,event);//使得lable可以被拖拽
			}
			
			private function doDragEnter(event:DragEvent,format:String):void{
				if(event.dragSource.hasFormat(format)){
					DragManager.acceptDragDrop(IUIComponent(event.target));//允许List接收释放
				}
			}
			
			private function doDragDrop(event:DragEvent,format:String):void{
				var myLabelData:Object=new Object();
				myLabelData=event.dragSource.dataForFormat("myFormat");
				myList.dataProvider.addItem(myLabelData);
			}
		]]-->
	</mx:Script>
	
	<mx:Label id="myLabel" 
		text="Drag me" mouseDown="dragIt(myLabel,'Test Label',event,'myFormat')"/>
	
	<mx:Spacer width="20"/>
	
	<mx:List id="myList" 
		width="200"
		dataProvider="{myListDP}" dragEnter="doDragEnter(event,'myFormat')" dragDrop="doDragDrop(event,'myFormat')"/>
		
</mx:Application>