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之间的拖动:
- <?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
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:[email protected]
- QQ:1019822077
- Blog:<font color="#FF0000">
- <a href="http://hi.baidu.com/woaidelphi/blog/category/Flex">
- http://hi.baidu.com/woaidelphi/blog/category/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:[email protected]
- QQ:1019822077
- Blog:<font color="#FF0000">
- <a href="http://hi.baidu.com/woaidelphi/blog/category/Flex">
- http://hi.baidu.com/woaidelphi/blog/category/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:[email protected]
- QQ:1019822077
- Blog:<font color="#FF0000">
- <a href="http://hi.baidu.com/woaidelphi/blog/category/Flex">
- http://hi.baidu.com/woaidelphi/blog/category/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:[email protected]
- QQ:1019822077
- Blog:<font color="#FF0000">
- <ahref="http://hi.baidu.com/woaidelphi/blog/category/Flex">
- http://hi.baidu.com/woaidelphi/blog/category/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组件到你的桌面。
http://code.google.com/p/flex-drag-n-drop-lib/downloads/list
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),否则可能无法产生相应区域。