Flex使用拖放

所有的Flex组件都支持拖放操作，一些子集组件还带有其他的拖放功能，为这些组件添加一个属性就可以实现拖放。在Flex里实现拖放是利用的拖放操作管理器及其提供的工具，如下介绍拖放操作管理器：

[table]
| 术语|定义|
|拖拽初始器|从中拖拽出组件的组件或项目
|拖拽源|拖拽的数据
|格式|拖拽源的属性，允许能否将一个对象释放到另一个对象上。拖拽源中的数据与格式相关联。格式的数据类型为就简单的字符串
|拖拽处理| 拖拽过程显示的图片
|释放目标|接受释放拖拽代理的组件
[/table]

拖放操作有3个阶段：
A、 初始化
B、 拖拽
C、 释放

根据拖放支持， Flex组件可以分为两类： 增强型拖放功能组件和非增强型拖放功能组件
下面是给予列表的控件都支持增强型的拖拽功能：

DataGrid
PrintDataGrid
Tree
Menu
List
HorizontalList
TileList
对于开发者而言，当使用增强型拖放控件来实现拖拽时，工作会非常简单。很多情况下，只需要对参与拖放的组件设置一个属性即可。

参见试验例子：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			  >
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<fx:XMLList xmlns="">
			<mx:XMLList id="employees">
				<employee>
					<name>Christina Coenraets</name>
					<phone>555-219-2270</phone>
					<email>ccoenraets@fictitious.com</email>
					<active>true</active>
				</employee>
				<employee>
					<name>Joanne Wall</name>
					<phone>555-219-2012</phone>
					<email>jwall@fictitious.com</email>
					<active>true</active>
				</employee>
				<employee>
					<name>Maurice Smith</name>
					<phone>555-219-2012</phone>
					<email>maurice@fictitious.com</email>
					<active>false</active>
				</employee>
				<employee>
					<name>Mary Jones</name>
					<phone>555-219-2000</phone>
					<email>mjones@fictitious.com</email>
					<active>true</active>
				</employee>
			</mx:XMLList>

		</fx:XMLList>
	</fx:Declarations>

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.core.DragSource;
			import mx.core.IUIComponent;
			import mx.events.DragEvent;
			import mx.managers.DragManager;
			[Bindable]
			private var dataSource:ArrayCollection = new ArrayCollection([{name:"yao",age:23},
				{name:"sun",age:18},{name:"tom",age:40}]);

			[Bindable]
			private var targetList:ArrayCollection = new ArrayCollection();
			[Bindable]
			private var myTargetList:ArrayCollection = new ArrayCollection();
			private function init():void{
				//targetDr.dataProvider = targetGridDs;
			}

			private function doDragDrop(event:DragEvent):void{
				var dgRow:Object = new Object();
				dgRow = event.dragSource.dataForFormat("items");
				list.dataProvider.addItem(dgRow[0].name);
				event.preventDefault();
			}

			private function  dragIt(initiator:Label,dsData:String,event:MouseEvent,format:String):void{
				var ds:DragSource = new DragSource();
				ds.addData(dsData,format);
				DragManager.doDrag(initiator, ds, event);
			}

			private function dragEnter(event:DragEvent,format:String):void{
				if(event.dragSource.hasFormat(format)){
					DragManager.acceptDragDrop(IUIComponent(event.target));
				}
			}

			private function doDragDrop2(event:DragEvent,format:String):void{
			     var myLabelData:Object = new Object();
				 myLabelData = event.dragSource.dataForFormat(format);
				 mylist.dataProvider.addItem(myLabelData);
			}
		]]>
	</fx:Script>

	<mx:DataGrid x="102" y="111" dataProvider="{dataSource}" dragEnabled="true">
		<mx:columns>
			<mx:DataGridColumn headerText="名字" dataField="name"/>
			<mx:DataGridColumn headerText="年龄" dataField="age"/>

		</mx:columns>
	</mx:DataGrid>
	<mx:Spacer height="50" width="100%"/>
	<mx:DataGrid x="110" y="289" dropEnabled="true" id="targetDr"
				>
		<mx:columns>
			<mx:DataGridColumn headerText="列 1" dataField="name"/>
			<mx:DataGridColumn headerText="列 2" dataField="age"/>
			<mx:DataGridColumn headerText="列 3" dataField="col3"/>
		</mx:columns>
	</mx:DataGrid>
	<s:List x="339" y="111" dropEnabled="true" dataProvider="{targetList}"
			id="list" dragDrop="doDragDrop(event)"><!--list的dataProvider若不赋初值则会报错-->
	</s:List>
	<s:Label x="457" y="97" text="拖我呀" id="testLabel" name="myLabel"
			  mouseDown="dragIt(testLabel,'My data here',event,'myformat')"/>

	<s:List x="457" y="128" dragEnter="dragEnter(event,'myformat')" id="mylist"
			dragDrop="doDragDrop2(event,'myformat')" dataProvider="{myTargetList}">
	</s:List>
</s:Application>

上文中的例子包括三个部分： 从dataGrid拖放到dataGrid， 从dataGrid拖放到list，从label拖放到List

注意： 后两部分必须显式地初始化释放目标的dataProvider，也即list控件中的
dataProvider="{targetList}"和dataProvider="{myTargetList}">，否则会报引用空对象的错误。

——————————————拖拽的相关事件——————————————————
拖拽初始事件
[table]
|拖拽事件|描述|
|mouseDown和mouseMove|在没有使用dragEnabled组件时，MouseEvent类的事件也用来启动拖放过程。当用户鼠标选择控件并按下鼠标不放时，广播mouseDown事件，移动则...

|dragComplete事件|...|

[/table]
释放目标事件
[table]
|拖拽事件| 描述 |
|dragEnter| 当拖拽代理从不妙外部移到目标上方时广播|
|dragOver|在dragEnter事件后，当用户把鼠标移到目标上方时广播|
|dragDrop|当在目标上方时释放鼠标广播|
|dragExit|当把数据拖放到目标外部没有释放时广播|
[/table]

————————————非增强型的重要拖拽类————————————————
DragSource类的方法
请自行查看API