拖拽

Flex组件内置了处理拖拽事件的接口，有些控件已经实现了拖拽功能，比如List、DataGrid、Menu、

HorizontalList、 PrintDataGrid、TileList、Tree，在设置相关的拖拽属性后，它们都可以在相同类型的组

件之间利用鼠标来实现数据的转移。
allowDragSelection          是否可以拖选
allowMultipleSelection      是否可以多选
dragEnabled                 是否可以拖动子元素
dragMoveEnabled             是否移动元素位置，而不是复制元素
dropEnabled                 是否可以将物体放置进来
在Flex中，有几个专门的对象供开发者处理拖拽事件：
DragManager：位于mx.managers包中，管理拖拽事件
DragSource：位于mx.core包中，是Flex框架中的核心成员，处理拖拽中的数据传递
DragEvent：位于mx.events包中，拖拽操作中的事件对象。
按照逻辑，拖拽中至少有两个对象：一方提供数据，一方接收数据。在这个过程中，提供数据的一方按照前后

顺序，可以把整个过程划分为下面几个事件：
mouseDown：鼠标按下。
mouseMove：鼠标移动。
dragComplate：鼠标释放。判断目标是否接受数据，如果可以，拖放成功。
接收方也将经历几个阶段

dragEnter：被拖动对象移动到目标范围中。
dragDrop：鼠标在目标上松开。
dragOver：鼠标移动到目标上。
dragExit：独享被拖离目标范围。
1.   Tree与Tree之间的拖动：
2.   <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"

verticalAlign="middle">
<mx:XML id="myData">
<data>
<item label="ActionScript">
<item label="Flash" />
<item label="Flex" />
</item>
<item label="Mirage">
</item>
<item label="JavaScript"/>
</data>
</mx:XML>
<mx:XML id="copyData">
<data>
<item label="JavaScript"/>
</data>
</mx:XML>
<mx:Tree dropEnabled="true" dragEnabled="true" dragMoveEnabled="true"

allowMultipleSelection="true"
dataProvider="{myData.item}" labelField="@label" />
<mx:Tree dropEnabled="true" dataProvider="{copyData.item}" labelField="@label"/>
</mx:Application>
上面代码中只需设置
dropEnabled="true" //是否可以将被拖动的物体放置进来
dragEnabled="true" //是否可以拖动子元素
dragMoveEnabled="true" //是否只是移动元素，而不是复制元素
allowMultipleSelection="true" //是否可以多项拖动元素,为true时可以用ctrl选多个一起拖动
List与List之间的拖动，只要设置上面的就可以了。
DataGrid 拖动到DataGrid和List
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"

verticalAlign="middle" fontSize="12">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.DragEvent;
[Bindable]
private var mylist:ArrayCollection;
//当拖完成时
private function onDrop(e:DragEvent) : void
{
var myData:Object = new Object();
myData = e.dragSource.dataForFormat('items');//从dragSource中拿到条目
var name:String = myData[0].name;//注意这个地方必需要用变量进行替换
list1.dataProvider.addItem(name);
e.preventDefault();//可以去掉默认的数据转移
}
]]>
</mx:Script>
<mx:XMLList id="employees">
<employee>
<name>刘海</name>
<phone>13042334532</phone>
<email>liuhai@163.com</email>
</employee>      
<employee>
<name>张春</name>
<phone>13642987532</phone>
<email>zhang@sina.com</email>
</employee>      
<employee>
<name>小李</name>
<phone>13923485844</phone>
<email>xiaoli@qq.com</email>
</employee>
</mx:XMLList>
<mx:DataGrid x="10" y="15" width="277" id="dg" rowCount="5"
dataProvider="{employees}" dragEnabled="true">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name"/>
<mx:DataGridColumn headerText="Email" dataField="email"/>
<mx:DataGridColumn headerText="Phone" dataField="phone"/>
</mx:columns>
</mx:DataGrid>
<mx:DataGrid dropEnabled="true">
<mx:columns>
<mx:DataGridColumn headerText="Name"

dataField="name"/>
<mx:DataGridColumn headerText="Email"

dataField="email"/>
<mx:DataGridColumn headerText="Phone"

dataField="phone"/>
</mx:columns>
</mx:DataGrid>
<mx:List height="210" width="206" id="list1" dropEnabled="true" dataProvider="{mylist}"

dragDrop="onDrop(event)"></mx:List>

<!--文档注释-->
<mx:TextInput width="500" height="146" horizontalCenter="0" verticalCenter="-204"

fontWeight="normal" textAlign="center">
<mx:htmlText>
<![CDATA[
Date: 2009.05.05
Email:woai_php@sina.com
QQ:1019822077
Blog:<font color="#FF0000"><a

href="http://hi.baidu.com/woaidelphi/blog/category/Flex">http://hi.baidu.com/woaidelphi/blog/cat

egory/Flex</a></font>
华夏之星希望和你成为朋友。一起学习，共同奋斗!!!。。。
]]>
</mx:htmlText>
</mx:TextInput>
</mx:Application>
2.非加强拖动技术
Label的拖动，可以扩展到其他组件
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.core.IUIComponent;
import mx.events.DragEvent;
import mx.core.DragSource;
import mx.managers.DragManager;

[Bindable]
private var listData:ArrayCollection = new ArrayCollection();
//拖动初始器
private function dragSource(myData:String,e:MouseEvent,format:String):void
{
var iu:IUIComponent = e.currentTarget as IUIComponent;
var ds : DragSource = new DragSource();
ds.addData(myData,format);//设置一个标号format
DragManager.doDrag(iu,ds,e); // 开始拖动这个物体
}
//当拖进去时
private function onEnter( e:DragEvent,format:String ) : void
{
if(e.dragSource.hasFormat(format))//如果标号为format则接受拖来的物体
{
DragManager.acceptDragDrop(IUIComponent(e.target) );// 接受被拖进来的物体      

}
}
//当拖完成时
private function onDrop(e:DragEvent,format:String) : void
{
var myData:Object = new Object();
myData = e.dragSource.dataForFormat(format);
list1.dataProvider.addItem(myData);//list1是List的id,要是扩展到其他组件，改这里就可

以了。
}
]]>
</mx:Script>
<mx:Label text="拖动我到List" width="86" height="27" id="lbl" mouseDown="dragSource('这个是

一个label',event,'stringFormat')"/>
<mx:List dataProvider="{listData}" id="list1" dragEnter="onEnter(event,'stringFormat')"

dragDrop="onDrop(event,'stringFormat')" width="206"></mx:List>
<!--文档注释-->
<mx:TextInput width="500" height="146" horizontalCenter="0" verticalCenter="-204"

fontWeight="normal" textAlign="center">
<mx:htmlText>
<![CDATA[
Date: 2009.05.05
Email:woai_php@sina.com
QQ:1019822077
Blog:<font color="#FF0000"><a

href="http://hi.baidu.com/woaidelphi/blog/category/Flex">http://hi.baidu.com/woaidelphi/blog/cat

egory/Flex</a></font>
华夏之星希望和你成为朋友。一起学习，共同奋斗!!!。。。
]]>
</mx:htmlText>
</mx:TextInput>
</mx:Application>

Button的拖动，可以扩展到其他组件
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"

verticalAlign="middle" fontSize="12">
<mx:Script>
<![CDATA[
import mx.core.IUIComponent;
import mx.events.DragEvent;
import mx.core.DragSource;
import mx.managers.DragManager;
//拖动初始器
private function dragSource(e:MouseEvent,format:String):void
{
var iu:IUIComponent = e.currentTarget as IUIComponent;
var ds : DragSource = new DragSource();
ds.addData( {"x" : e.localX, "y" : e.localY},format);//设置一个标号format
DragManager.doDrag(iu,ds,e);
}
//当拖进去时
private function onEnter( e:DragEvent,format:String ) : void
{
if(e.dragSource.hasFormat(format))//如果标号为format则接受拖来的物体
{
DragManager.acceptDragDrop(IUIComponent(e.target) );         
}
}
//当拖完成时
private function onDrop(e:DragEvent,format:String) : void
{
var myData:Object = new Object();
myData = e.dragSource.dataForFormat(format);
btn.x = this.mouseX - myData.x;//btn为按钮的id,要是扩展到其他组件，改这里就可以了。
btn.y = this.mouseY - myData.y;
}
]]>
</mx:Script>
<mx:Canvas y="40" id="cansAccess" backgroundColor="#000000" width="300" height="200"
dragEnter="onEnter(event,'formatString')" dragDrop="onDrop(event,'formatString')"/>
<mx:Button id="btn" label="拖动我到面板"   mouseDown="dragSource(event,'formatString')" />
<!--文档注释-->
<mx:TextInput width="500" height="146" horizontalCenter="0" verticalCenter="-204"

fontWeight="normal" textAlign="center">
<mx:htmlText>
<![CDATA[
Date: 2009.05.05
Email:woai_php@sina.com
QQ:1019822077
Blog:<font color="#FF0000"><a

href="http://hi.baidu.com/woaidelphi/blog/category/Flex">http://hi.baidu.com/woaidelphi/blog/cat

egory/Flex</a></font>
华夏之星希望和你成为朋友。一起学习，共同奋斗!!!。。。
]]>
</mx:htmlText>
</mx:TextInput>

</mx:Application>

一定要注意，标签的先后位置，Button 要在Canvas 之后.
3.Canvas容器中拖动Box,你还可以在Box中添加图片等。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">
<mx:Script>
<![CDATA[
import mx.containers.Box;
import mx.containers.Canvas;
import mx.core.IUIComponent;
import mx.events.DragEvent;
import mx.managers.DragManager;
import mx.core.DragSource;

//拖动初始器
private function dragSource(e:MouseEvent,format:String):void
{            
var iu:IUIComponent = e.currentTarget as IUIComponent;
var ds : DragSource = new DragSource();
ds.addData(iu,format);//设置一个标号format
DragManager.doDrag(iu,ds,e); // 开始拖动这个物体
}
//当拖进去时
private function onEnter( e:DragEvent,format:String ) : void
{
if(e.dragSource.hasFormat(format))//如果标号为format则接受拖来的物体
{
DragManager.acceptDragDrop(IUIComponent(e.target) );// 接受被拖进来的物体      

}
}
//当拖完成时
private function onDrop(e:DragEvent,format:String) : void
{
var box:Box = Box(e.dragInitiator);//如果扩展到其他组件，改这里Box就可以了。
box.x = e.localX;
box.y = e.localY;
}
]]>
</mx:Script>

<mx:Canvas backgroundColor="0xEEEEEE" width="500" height="246" horizontalCenter="0"

verticalCenter="0"
dragEnter="onEnter(event,'boxFormat')"
dragDrop="onDrop(event,'boxFormat')" >
<mx:Box id="boxDrag" width="20" height="20" backgroundColor="0x00FFCC" x="97" y="47"
mouseDown="dragSource(event,'boxFormat');"></mx:Box>
</mx:Canvas>
<!--文档注释-->
<mx:TextInput width="500" height="146" horizontalCenter="0" verticalCenter="-204"

fontWeight="normal" textAlign="center">
<mx:htmlText>
<![CDATA[
Date: 2009.05.05
Email:woai_php@sina.com
QQ:1019822077
Blog:<font color="#FF0000"><a

href="http://hi.baidu.com/woaidelphi/blog/category/Flex">http://hi.baidu.com/woaidelphi/blog/cat

egory/Flex</a></font>
华夏之星希望和你成为朋友。一起学习，共同奋斗!!!。。。
]]>
</mx:htmlText>
</mx:TextInput>
</mx:Application>
4.图片的拖动
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%"

height="100%" fontSize="12">
<mx:Script>
<![CDATA[
private var oldX:Number;//拖动开始是的坐标
private var oldY:Number;
//拖动开始
private function dragStart(event:MouseEvent):void{
oldX = event.stageX;//相对Application的坐标
oldY = event.stageY;
}
//拖动结束
private function dragEnd(event:MouseEvent):void{
lbl.text = "Local (x,y):" + event.localX.toString() + ","+event.localX.toString();//

相对图片的坐标
lbl2.text = "Stage (x,y):" + event.stageX.toString() + ","+event.stageY.toString

();//相对Application的坐标
if(event.buttonDown){//如果鼠标在移动过程中并且按下，也就是说鼠标的拖动事件。
var x:Number = event.stageX - oldX;//相对Application的坐标的移动量
var y:Number = event.stageY - oldY;
oldX = event.stageX;//更新拖动开始是的坐标
oldY = event.stageY;            
img.move(img.x + x,img.y + y); //img是 Image的id,如果扩展到其他组件，改这里就可

以了。
}
}
]]>
</mx:Script>
<mx:Label x="10" y="10" text="" id="lbl"/>
<mx:Label x="10" y="27" text="" id="lbl2"/>
<mx:Panel x="257" y="71" width="700" height="80%" layout="absolute"
horizontalScrollPolicy="off" verticalScrollPolicy="off" title="图片在面板中的拖动例子"

fontSize="12">
<mx:Image id="img" x="0" y="0" source="test.JPG"
mouseMove="dragEnd(event)"
mouseDown="dragStart(event)"/>
</mx:Panel>
<!--文档注释-->
<mx:TextInput width="500" height="146" fontWeight="normal" textAlign="center">
<mx:htmlText>
<![CDATA[
Date: 2009.05.05
Email:woai_php@sina.com
QQ:1019822077
Blog:<font color="#FF0000"><a

href="http://hi.baidu.com/woaidelphi/blog/category/Flex">http://hi.baidu.com/woaidelphi/blog/cat

egory/Flex</a></font>
华夏之星希望和你成为朋友。一起学习，共同奋斗!!!。。。
]]>
</mx:htmlText>
</mx:TextInput>
</mx:Application>

5.从外部拖动到组件，比如从桌面上拖动一个图片到图片组件等。
因为我的flash包中没有flash.events.NativeDragEvent等。所以这里先不总结了。

6.引入dNdLib.swc库让拖动变得更简单
Flex开放了它的拖拽库（即：flex-drag-n-drop-lib），我们可以利用它做一些很有用的拖拽应用，下面我们

来做一个简单的示例，按照下述的步骤，你会了解到在Flex中使用flex-drag-n-drop-lib的技巧。
1.点击这里下载SWC组件到你的桌面。
2.打开FlexBuilder，新建一个Flex Project，在第三步的Library Path选项中，点击Add SWC按钮，将刚才下

载到的SWC组件引入到项目中。
3.点击Finish，在自动创建的MXML文件中，敲入以下代码：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

xmlns:containers="dNdLib.containers.*" fontSize="12">
<mx:Script>
<![CDATA[
import dNdLib.managers.DnDManager;
]]>
</mx:Script>
<containers:DnDContainer borderStyle="solid" id="left" backgroundColor="#FFFFFF"
width="161" height="237" x="110" y="168">
<mx:Button label="拖动我" mouseDown="DnDManager.getInstance().doDrag(event)" width="92"

height="32"/>
<mx:CheckBox label="拖动就这么简单" mouseDown="DnDManager.getInstance().doDrag(event)"/>
</containers:DnDContainer>

<containers:DnDContainer borderStyle="solid" id="bottom" backgroundColor="#FFFFFF"
x="415" y="168" width="140" height="237"/>
</mx:Application>
然后Run一下看看结果吧，组件可以拖动了。很简单吧。
注意：必须为DnDContainer设置一个背景色（backgroundColor=color），否则可能无法产生相应区域。

http://weblogs.macromedia.com/pent/DragAndDrop.swf拖动的例子
1.Tree与Tree之间的拖动
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" verticalAlign="middle" fontSize="12">
<mx:Script>
<![CDATA[
import mx.controls.Button;
import mx.core.IUIComponent;
import mx.core.DragSource;
import mx.managers.DragManager;
import mx.events.DragEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
//拖动对象进入时
private function onDragOver( event:DragEvent ) : void
{
var dropTarget:Tree = Tree(event.currentTarget);
var r:int = dropTarget.calculateDropIndex(event);
lbl.text = '当前位置：'+r.toString();//哪一个节点在鼠标下并给出相应信息
tree2.selectedIndex = r; //显示位置
var node:XML = sourceTree.selectedItem as XML;
lbl2.text = '当前的拖动对象是:'+node.@label;//拖动对象的名字
if( node.@label == "ActionScript" ) {
DragManager.showFeedback(DragManager.NONE);
return;
}
// 键盘控制
if (event.ctrlKey)
DragManager.showFeedback(DragManager.COPY);//复制
else if (event.shiftKey)
DragManager.showFeedback(DragManager.LINK);//剪切
else {
DragManager.showFeedback(DragManager.MOVE);//移动
}
}

//拖动对象被抛出后
private function onDragDrop( event:DragEvent ) : void
{
// var ds:DragSource = event.dragSource;
var dropTarget:Tree = Tree(event.currentTarget);
// retrieve the data associated with the "items" format.
//var items:Array = ds.dataForFormat("items") as Array;
var r:int = tree2.calculateDropIndex(event);
tree2.selectedIndex = r;//当拖放完成后选定相应的节点
var node:XML = tree2.selectedItem as XML;
var p:*;
//tree2.dataDescriptor.hasChildren(node)判断有没有子节点,如果有就返回true
if( tree2.dataDescriptor.hasChildren(node) ) {
p = node;
r = 0;
trace('有子节点');
} else {
p = node.parent();
trace('没有子节点');
}

// taking all of the items in the DragSouce, insert them into the
// tree using parent p.
//       for(var i:Number=0; i < items.length; i++) {
//             var insert:XML = <node/>;
//             insert.@label = items[i];
//             insert.@type = "restaurant";
//             tree2.dataDescriptor.addChildAt(p, insert, r+i);
//       }
}

private function onDragComplete(event:DragEvent) : void
{
trace('stop');
tree2.selectedIndex = 0;
}

]]>
</mx:Script>
<mx:XML id="myData">
<data>
<item label="ActionScript">
<item label="Flash" />
<item label="Flex" />
</item>
<item label="Mirage">
</item>
<item label="JavaScript"/>
</data>
</mx:XML>
<mx:XML id="copyData">
<data>
<item label="JavaScript"/>
</data>
</mx:XML>
<mx:Label text="Label" id="lbl" x="439" y="120"/>
<mx:Tree dropEnabled="true" dragEnabled="true" allowMultipleSelection="true" id="sourceTree"
dataProvider="{myData.item}" labelField="@label" x="114" y="146"/>
<mx:Tree dropEnabled="true" id="tree2" dataProvider="{copyData.item}" labelField="@label"
dragOver="onDragOver(event)" dragDrop="onDragDrop(event)" dragComplete="onDragComplete(event)" x="382" y="146"/>

<mx:Label x="382" y="94" text="Label" width="274" id="lbl2" height="29"/>
<mx:Label x="218" y="62" text="Tree与Tree之间的拖动" width="139" height="19"/>
</mx:Application>

2.Tree拖动到List（总结网友数据）
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">
<mx:Script>
<![CDATA[
import mx.controls.Label;
import mx.core.IUIComponent;
import mx.core.DragSource;
import mx.managers.DragManager;
import mx.events.DragEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;

[Bindable]
public var list:ArrayCollection=new ArrayCollection();

//拖动初始器
private function dragSource(e:MouseEvent,format:String):void
{
var iu:IUIComponent = e.currentTarget as IUIComponent;
var ds:DragSource=new DragSource();
ds.addData(myTree.selectedItem,format);//为myTree设置一个标号forma
var lbl:Label=new Label();
lbl.text="开始拖动";
lbl.x = e.stageX;
lbl.y = e.stageY;
//lbl拖动的影子，默认为自己doDrag（拖动的对象，拖动器，事件，拖动影子，x,y）
DragManager.doDrag(iu,ds,e,lbl,e.stageX,e.stageY);//开始拖动这个物体           
}

//当拖进去时
private function doDragEnter(e:DragEvent,format:String):void
{
var len:int=(mylist.dataProvider as ArrayCollection).length;//判断list中有多少个数据
var selectnode:XML = myTree.selectedItem as XML;//选择的节点名
for(var i:int=0;i<len;i++)
{
if(validateIsEqual((mylist.dataProvider as ArrayCollection).getItemAt(i),selectnode))
{
Alert.show("该班组已经存在！");
}
}
if(e.dragSource.hasFormat(format)){//如果标号为format则接受拖来的物体
DragManager.acceptDragDrop(IUIComponent(e.target));
}
}

//当拖完成时
private function onDragDrop(e:DragEvent,format:String):void{
var row:Object=e.dragSource.dataForFormat(format);
list.addItem(row);//list的数据源添加数据
}

//判断选中的节点是否和List中的内容一样
private function validateIsEqual(obj1:Object,obj2:Object):Boolean
{
if(obj1==obj2)//条件未判断
{
return true;
}
else
{
return false;
}
}

]]>
</mx:Script>
<!-- 这里定义班组树的结构和内容 -->
<mx:XMLList id="treeData">
<node label="Mail Box">
<node label="工区1">
<node label="工地1">
<node label="班组1.1" data="111"/>
<node label="班组1.2"/>
</node>
<node label="工地2">
<node label="班组2.1"/>
<node label="班组2.2"/>
</node>
<node label="工地3">
<node label="班组3.1"/>
<node label="班组3.2"/>
</node>
</node>
<node label="工区2">
<node label="Professional"/>
<node label="Personal"/>
</node>
</node>   
</mx:XMLList>   
<mx:Tree id="myTree" labelField="@label" dragEnabled="true" mouseDown="dragSource(event,'stringFormat')"
showRoot="true" dataProvider="{treeData}"   height="331" horizontalCenter="-120" verticalCenter="7" width="190"/>

<mx:List height="331" labelField="@label" dragEnter="doDragEnter(event,'stringFormat')"
dataProvider="{list}" dragDrop="onDragDrop(event,'stringFormat')" width="162" id="mylist" horizontalCenter="114" verticalCenter="7"></mx:List>
<mx:Label x="282.5" y="97" text="Tree与list的拖动" width="152"/>
</mx:Application>