- 浏览: 256766 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
smartzjp:
可以理解为如果每行数据的所有列都有值,而且列名都是相等的,这个 ...
hbase关于bloom filter使用 -
xiao_feng68:
flash.system.Security.loadPolic ...
关于flex跨域加载MODULE的问题 -
sulanyan29:
挺详细的.
linux之iptables -
liuzhiqiangruc:
这个只要dos2unix 就可以了吧
linux日常工作技巧 -
四个石头:
...
简化的Flex4结构图
为了改善客户体验,系统引入的相关的拖拽功能,所以就进行了一番简单的学习,希望对其他朋友也有用处,内容来自:
http://luohonghong.blog.163.com/blog/static/7831205820099425641884/
下面主要是相关使用的例子,入门简单,希望以此能做出更的新奇效果。
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},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/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);//设置一个标号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/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>
发表评论
-
Flashbuilder4.5中文版破解方法
2013-07-17 11:38 13http://my.oschina.net/liweigov ... -
flex的ant编译脚本
2012-10-08 14:57 2570来自:https://gist.github.com/9442 ... -
flex 使用https
2012-06-15 10:06 1535来自网络: 1、https是安全认证协议,所以要采用S ... -
Flex性能优化
2011-07-24 09:22 1271ActionScript 3 和 Flex框架的性能优化 ... -
flex编译参数
2011-05-04 15:24 1719来自:http://www.blogjava.net/bjwu ... -
flex常用小技巧
2011-03-16 17:09 10281)label显示多行字符(在text的字符中添加String ... -
关于flex截图
2011-03-16 16:37 2362参考: http://xltank.iteye.com/bl ... -
元数据解释
2011-03-16 15:30 1153来自: http://xltank.iteye.com/bl ... -
flex通过JS播放wma语音的问题
2011-03-16 11:57 1910flex通过ExternalInterface.call(&q ... -
关于跨域访问后部分本地channel连接失败解决方法
2011-03-02 15:10 1079由于项目需要使用到跨域访问的方式来加载另外一个应用的一个处理模 ... -
简化的Flex4结构图
2011-02-27 15:17 1771来自:http://blog.csdn.net/wkyb608 ... -
关于flex跨域加载MODULE的问题
2011-02-12 17:52 1923近来项目有需要使用跨域访问MODULE的需求,故此做了一些学习 ... -
flex背景平铺
2011-01-23 10:46 1374定义样式: Application{ backgr ... -
关于角度与弧度关系以及转换
2010-12-12 14:02 20801弧度约等于57.2958度。 一个圆,360度,计算出的弧 ... -
关于复杂表格(行或列合并)的实现
2010-12-12 11:12 2392一个关于列合并与行合并的例子,来自: http://www. ... -
关于Sound的ID3Info相关乱码问题
2010-11-27 14:03 1372来自: http://hereson.iteye.com/b ... -
关于事件冒泡
2010-10-27 00:40 986今天在写程序的时候,发现在有一个程序的事件就是抛出不出来,父控 ...
相关推荐
flex真是个很强大的工具,当然demo也是我们学习的主要方法,flex拖拽画矩形,很流畅的,一点不卡
flex实现的拖拽效果,对flex的学习者有一定的帮助
flex中一个很不错的拖拉伸缩组件,适合新人学习的组件....
个人学习flex中的资料,编写拓扑的示例,可以实现拖动的功能
FLEX时间轴代码,时间轴可以拖动,时间粒度为月粒度,功能还不完善,但已经基本可以使用,欢迎下载后修改和补充,此代码仅供学习和研究之用,请勿用于任何商业用途,后果自负.
flex单击图片拖动,双击图片旋转,双击单击同时用,虽然不难,但对初学者很有帮助的,找到一个很好的例子来学习flex会事半功倍
可以正确刷新批量上传时进度条。 源码为学习用途。所以写得随便了一些。 请留意javascript 有Flex 回调函数。
10.6 节自定义列表类控件的拖动图像 10.7 节. 自定义列表类控件的拽动指示器 第十一章. States(381) 11.1节.设置State的样式和属性 11.2节. 为进入和离开States创建Transitions 11.3节. 使用AddChildAction和...
拖拽Tree中结点的例子,学习flex 的树组件节点的拖拉动作
本软件需要安装Adobe AIR环境 ... 2.然后再安装TimerSystem 1.2.1.air!...4.系统采用Flex4开发,供交流学习使用,未经本人允许,请勿传播~! 5.联系方式:qq:471832030 e-mail:duanliquan@hotmail.com
窗口缩放时图表自动缩放无需刷新,可通过拖动浏览器窗口大小测试。 图表定时刷新重绘效果,可分别指定需要和不需要刷新的图表。这里仅是前端展示用,也可配合异步加载数据后重绘图表。 页面显示时钟、城市定位和天气...
核心技术: -基于 flexible.js + rem 智能大屏适配 - VScode cssrem插件 - Flex 布局 - Less 使用 - 基于ECharts 数据可视化展示 - ECharts 柱状图数据设置 - ECharts 地图引入
.NET关于string转换的一个小Bug Regular Expressions 完整的在.net后台执行javascript脚本集合 ASP.NET 中的正则表达式 常用的匹配正则表达式和实例 经典正则表达式 delegate vs. event 我是谁?[C#] 表达式计算引擎...
学习actionScript不错的书籍。 目录: 目录 第章:使用日期和时间 管理日历日期和时间 控制时间间隔 日期和时间示例:简单模拟时钟 第章:使用字符串 字符串基础知识 创建字符串 length属性 处理字符串中的字符 比较...