|
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"</itemitem?label="Mirage"item?label="JavaScript"mx:XMLmx:XML?id="copyData"mx:Tree?dropEnabled="true"??
- ?????????????dragEnabled="true"??
- ?????????????dragMoveEnabled="true"??
- ?????????????allowMultipleSelection="true"??
- ?????????????dataProvider="{myData.item}"??
- ?????????????labelField="@label" ?????????????dataProvider="{copyData.item}"??
- mx:Application>??
?
上面代码中只需设置
dropEnabled="true" //是否可以将被拖动的物体放置进来
dragEnabled="true" //是否可以拖动子元素
dragMoveEnabled="true" //是否只是移动元素，而不是复制元素
allowMultipleSelection="true" //是否可以多项拖动元素,为true时可以用ctrl选多个一起拖动
List与List之间的拖动，只要设置上面的就可以了。
DataGrid 拖动到DataGrid和List
????????????????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:XMLList?id="employees"employeename>刘海phone>13042334532email>liuhai@163.com>张春>13642987532>zhang@sina.com>小李>13923485844>xiaoli@qq.commx:XMLListmx:DataGrid?x="10"??
?????????????????y="15"??
?????????????????width="277"??
?????????????????id="dg"??
?????????????????rowCount="5"??
?????????????????dataProvider="{employees}"??
?????????????????dragEnabled="true"mx:columnsmx:DataGridColumn?headerText="Name"??
???????????????????????????????dataField="name"mx:DataGridColumn?headerText="Email"??
???????????????????????????????dataField="email"mx:DataGridColumn?headerText="Phone"??
???????????????????????????????dataField="phone"mx:DataGridmx:DataGrid?dropEnabled="true"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 ????????????????????????????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/category/Flex?
???????????????????</a>?
????????????????</font>?
??????????????????华夏之星希望和你成为朋友。一起学习，共同奋斗!!!。。。?
????????????]]>??
mx:TextInput 2.非加强拖动技术
Label的拖动，可以扩展到其他组件
mx:Application? xmlns:mx= "http://www.adobe.com/2006/mxml"? layout= "vertical"? fontSize= "12" ????????????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: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" ?????????width="500"?height="146"?horizontalCenter="0"?verticalCenter="-204"??
????????fontWeight="normal"?textAlign="center"?????????????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/category/Flex?
?????????????</a>?
?????????????</font>?
?????????????华夏之星希望和你成为朋友。一起学习，共同奋斗!!!。。。?
Button的拖动，可以扩展到其他组件
????????????import?mx.core.IUIComponent;?
????????????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,147)">????????????????if?(e.dragSource.hasFormat(format))?//如果标号为format则接受拖来的物体?
????????????????{?
????????????????????DragManager.acceptDragDrop(IUIComponent(e.target));?
????????????????}?
????????????private?function?onDrop(e:DragEvent,147)">????????????????myData=e.dragSource.dataForFormat(format);?
????????????????btn.x=this.mouseX?-?myData.x;?//btn为按钮的id,147)">????????????????btn.y=this.mouseY?-?myData.y;?
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,147)">?????????????</a></font>?
?
一定要注意，标签的先后位置，Button 要在Canvas 之后.
3.Canvas容器中拖动Box,你还可以在Box中添加图片等。
????????????????layout="absolute"??
????????????import?mx.containers.Box;?
????????????import?mx.containers.Canvas;?
????????????????ds.addData(iu,?e);?//?开始拖动这个物体?
????????????????????DragManager.acceptDragDrop(IUIComponent(e.target));?//?接受被拖进来的物体???????
????????????????var?box:Box=Box(e.dragInitiator);?//如果扩展到其他组件，改这里Box就可以了。?
????????????????box.x=e.localX;?
????????????????box.y=e.localY;?
mx:Canvas?backgroundColor="0xEEEEEE"??
???????????????width="500"??
???????????????height="246"??
???????????????horizontalCenter="0"??
???????????????verticalCenter="0"??
??
mx:Box?id="boxDrag"??
????????????????width="20"??
????????????????height="20"??
????????????????backgroundColor="0x00FFCC"??
????????????????x="97"??
????????????????y="47"??
????????????????mouseDown="dragSource(event,'boxFormat');"mx:Boxmx:Canvas???????????????华夏之星希望和你成为朋友。一起学习，共同奋斗!!!。。。?
4.图片的拖动
????????????????width="100%"??
????????????????height="100%"??
????????????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:Label?x="10"??
??????????????y="10"??
??????????????text=""??
??????????????id="lbl" ??????????????y="27"??
??????????????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?????????????<ahref="http://hi.baidu.com/woaidelphi/blog/category/Flex">?
?
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文件中，敲入以下代码：
????????????????xmlns:containers="dNdLib.containers.*"??
????????????import?dNdLib.managers.DnDManager;?
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 ?????????????????????????????id="bottom"??
?????????????????????????????x="415"??
?????????????????????????????y="168"??
?????????????????????????????width="140"??
?????????????????????????????height="237" 然后Run一下看看结果吧，组件可以拖动了。很简单吧。
注意：必须为DnDContainer设置一个背景色（backgroundColor=color），否则可能无法产生相应区域。
转载于：http://vipoyb.iteye.com/blog/437684
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
