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
- <?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/category/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/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: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: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/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:woai_php@sina.com
- 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组件到你的桌面。
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),否则可能无法产生相应区域。
相关推荐
Flex中的List、DataGrid、Menu 拖动技术以及源码
FLEX自定义拖拽容器 flex写的一个可拖拽的容器系统 有点像背包系统 但背包内元素是图标 这个是容器里面愿意放什么放什么(如列表、日历等) 本资源非原创 从老外那找的 里面是纯代码生成的 支持技术研究(如果是图片...
flex画两个图片控件,用箭头把这两个连接起来,定制工作流程需要的flex技术例子。
用 flex 与 kinect 体感设备集成开发的一个类库,该类库里有一般的手势实现,如单击,拖动,缩放等。
如何使用视图状态、样式单、特效以及拖拽技术进行美化设计和加强应用;如何在客户端处理诸如集合数组、XML数据等;如何应用数据表格,同时深入介绍了Flex的服务器端技术。本书还特别介绍了如何使用Flex技术开发Adobe...
如何使用视图状态、样式单、特效以及拖拽技术进行美化设计和加强应用;如何在客户端处理诸如集合数组、XML数据等;如何应用数据表格,同时深入介绍了Flex的服务器端技术。本书还特别介绍了如何使用Flex技术开发Adobe...
描述: 该编辑器支持流程文件的图形界面输入方式编辑, 不需考虑流程... 由于时间和技术方面原因, 细节问题这里不做过多说明, 如果要看该编辑器应用于真实应用系统上的效果, 请联系我, 彼此沟通. QQ:234145892
最新 RIA技术 拖拽 两个列表框之间传递 flex
* 用Adobe Flash Builder 4/Flex Builder 3开发环境打开,用Flex SDK 3.5进行编译 * 内有报表样式定义说明 * 内有Demo工程参考,使用MyReport * 不提供MyReport源码,提供swc组件(类似dll) * 只需少量工作就能把...
so~ 然后领导就感觉这个拖拽效果还行,能不能加到咱们项目里面。 既然领导发话,那就开干。。 所有技术:vue + vuedraggable 拖动的实现基于 vuedraggable 的插件开发。 主页为两栏流式布局,每一个组件可以在上下...
2.4.2使用FlexBuilder 2.4.3使用免费的命令行编译器 2.4.4关于跟踪 2.4.5缩放影片 2.5使用代码动画 2.5.1循环 2.5.2帧循环 2.5.3剪辑事件 2.5.4事件和事件处理器 2.5.5侦听器和处理器 2.5.6动画事件 2.6显示列表 2.7...
2.4.2 使用Flex Builder 2.4.3 使用免费的命令行编译器 2.4.4 关于跟踪 2.4.5 缩放影片 2.5 程序动画 2.5.1 动画的执行过程 2.5.2 帧循环 2.5.3 影片事件 2.5.4 事件和事件处理 2.5.5 事件侦听器与处理函数 2.5.6 ...
核心技术: -基于 flexible.js + rem 智能大屏适配 - VScode cssrem插件 - Flex 布局 - Less 使用 - 基于ECharts 数据可视化展示 - ECharts 柱状图数据设置 - ECharts 地图引入
2、完全可视化拖拽式排版模式 3、以模块为编辑单元,编辑过程实时预览 4、支持全站生成静态页 5、内置丰富模块边框样式 6、可自定义导航菜单和模块边框,快速制作及模仿网站显示效果。 7、强大的后台管理功能,...
本地化Flex内容 本地化Flash内容 本地化AIR应用程序 对日期、时间和货币进行本地化 第章:关于HTML环境 HTML环境概述 AIR和WebKit 第章:在AIR中进行HTML和JavaScript编程 关于HTMLLoader类 避免与安全相关的...
如何在Asp.Net1.1中实现页面模板(所谓的MasterPage技术) Tool Tip 示例(FILTER版) Tool Tip示例 (htc版) 一个.net发送HTTP数据实体的类 按键跳转以及按Enter以不同参数提交,及其他感应事件 动态控制Page页的...
产品结合中小企业用户的特点,设计了可视化拖放编辑模式,辅以强大的后台内容管理系统。无需写程序代码、无需美工基础,只要具有基本的审美观,就能迅速制作出美观实用的网站。 产品特点: 1、无需写代码、无需...