组件的拖动分为:加强型(即本身就可以拖动设置是否可以拖动的属性即可),非加强型(可以通过DragManager,DragEvent,DragSource三个类来实现)
下面详细讲解常见的拖动,案例比较多,可以自行类推和拓展!
- <?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:Application>
Flex组件内置了处理拖拽事件的接口,有些控件已经实现了拖拽功能,比如List、DataGrid、Menu、
HorizontalList、 PrintDataGrid、TileList、Tree,在设置相关的拖拽属性后,它们都可以在相同类型的组件之间利用鼠标来实现数据的转移。
allowDragSelection
allowMultipleSelection
dragEnabled
dragMoveEnabled
dropEnabled
在Flex中,有几个专门的对象供开发者处理拖拽事件:
DragManager:位于mx.managers包中,管理拖拽事件
DragSource:
DragEvent:
按照逻辑,拖拽中至少有两个对象:一方提供数据,一方接收数据。在这个过程中,提供数据的一方按照前后顺序,可以把整个过程划分为下面几个事件:
mouseDown:鼠标按下。
mouseMove:鼠标移动。
dragComplate:鼠标释放。判断目标是否接受数据,如果可以,拖放成功。
接收方也将经历几个阶段
dragEnter:被拖动对象移动到目标范围中。
dragDrop:鼠标在目标上松开。
dragOver:鼠标移动到目标上。
dragExit:独享被拖离目标范围。
1.
- <?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:Application>