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},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: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>