在Flex中,组件的拖动分为:

1. 加强型(即本身就可以拖动设置是否可以拖动的属 [dragEnabled ,dropEnabled ] 即可)

2. 非加强型(可以通过DragManager,DragEvent,DragSource三个类来实现)

3. 那么拖动就可以分为四种 a. 加强型==》加强型、b. 加强型==》非加强型、【c. 加强型==》非加强型、d. 非加强型==》加强型】

4.拖动外部的文件到面板上(这个目前没试过)

详细的拖动教程-->传送门:http://blog.csdn.net/voyage_mh1987/article/details/7990139 (里面很详细)


拖动常用属性和常用事件

Flex组件内置了处理拖拽事件的接口,有些控件已经实现了拖拽功能,比如List、DataGrid、Menu、
HorizontalList、 PrintDataGrid、TileList、Tree,在设置相关的拖拽属性后,它们都可以在相同类型的组件之间利用鼠标来实现数据的转移。
allowDragSelection           是否可以拖选
allowMultipleSelection       是否可以多选
dragEnabled                     是否可以拖动子元素
dragMoveEnabled              是否移动元素位置,而不是复制元素
dropEnabled                     是否可以将物体放置进来

在Flex中,有几个专门的对象供开发者处理拖拽事件:
DragManager:位于mx.managers包中,管理拖拽事件
DragSource:   位于mx.core包中,是Flex框架中的核心成员,处理拖拽中的数据传递
DragEvent:     位于mx.events包中,拖拽操作中的事件对象。


现在就为举几个例子吧(加强型-->加强型、非加强型-->非加强型、加强型-->非加强型)。

一、加强型==》加强型

只要两个控件,

一个设置 dragEnabled (是否可拖动)属性,

一个设置 dropEnabled (是否可接收拖动过来的元素)

可选属性【dragMoveEnabled:是否只是移动元素,而不是复制元素】

可选属性【allowMultipleSelection:是否可以多项拖动元素,为true时可以用ctrl选多个一起拖动】

  就可以拖动了。

1.1  如果是同一个控件类型之间拖动(list-->list , datagrid-->datagrid)之间,只要简单的设置属性即可。

1.2  如果是加强型中不同控件类型之间拖动(list-->datagrid .....),要记得设置 List中的labelField(绑定的字段名)  DataGrid中的dataField(绑定的数据字段)

设置这两个属性,主要是在控件绑定的数据,是对象类型(eg:Student类里面有姓名,年龄等属性),而不是基本数据类型(eg:String,int,Number...)

不设置的话,List会显示object:Object   ,而DataGrid则会显示一个空行(没有看到数据)

例子:list-->DataGrid 之间的拖动(List绑定的是一个对象数组

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)"> <mx:Script> <![CDATA[ //页面加载结束,会调用的事件处理(在application节点设置 creationComplete 事件,就会调用下面这个方法) protected function application1_creationCompleteHandler(event:FlexEvent):void { var arr:Array = new Array(); //声明一个数组 var obj:Object = new Object(); //数组里面放的对象 obj["name"] = "zhongxia"; obj["age"] = 20 arr.push(obj); list_goods.dataProvider = arr; //为List绑定数据 } ]]> </mx:Script> <mx:List x="171" y="186" id="list_goods" dragEnabled="true" dropEnabled="true" labelField="name" dragMoveEnabled="true"> </mx:List> <mx:DataGrid x="362" y="186" id="dg_goods" dropEnabled="true" dragEnabled="true"> <mx:columns> <mx:DataGridColumn headerText="姓名" dataField="name" /> <mx:DataGridColumn headerText="年龄" dataField="age" /> </mx:columns> </mx:DataGrid> </mx:Application>

二、加强型--》非加强型 (通用的,加强型和非加强型都可以用这个实现)

详细代码下载这个文件看:(例子的代码,下面只贴上核心代码)

  2.1  拖动的几个步骤:

按照逻辑,拖拽中至少有两个对象:一方提供数据,一方接收数据。在这个过程中,提供数据的一方按照前后顺序,可以把整个过程划分为下面几个事件:

拖动方:

mouseDown:鼠标按下。

mouseMove:鼠标移动。

dragComplate:鼠标释放。判断目标是否接受数据,如果可以,拖放成功。

接收方也将经历几个阶段:

dragEnter:被拖动对象移动到目标范围中。

dragDrop:鼠标在目标上松开。

dragOver:鼠标移动到目标上。

dragExit:独享被拖离目标范围。

2.2  正常拖动使用到的步骤

正常的拖动,只使用到了上个几个步骤中的三个。(拖动方:mouseDown; 接收方:dragEnter,dragDrop)

mouseDown:拖动方鼠标点击下的时候,把拖动方设置成可拖动,并且保存一些想要拖动传递的数据。

dragEnter:被拖动的对象进入目标范围中,判断这个对象是否可以被接收

dragDrop:如果可以被接收的话,则拖动方鼠标放开的时候,就会触发这个事件,进行一些处理。

代码截图:(需要复制代码的,请下载上面那个代码文件)

控件标签:设置监听事件(框框中是核心)


三、加强型-->非加强型

在近期公司的Flex项目开发中,使用的是这种方法。从左边Tree控件拖动放到面板容器(Canvas)中。

这里就讲一下思路,以及一些核心代码

加强型 --> 到非加强型的拖动,和 非加强型-->非加强型不一样的地方有两个地方【当然如果不改也是可以的,因为加强型只是Flex封装好了,你可以覆盖掉】。

1、不需要在写MouseDown事件(-->改为:设置 dragEnabled 拖动)

2、当拖动的对象进入目标范围是,DragEnter事件判断是否可以接收的格式变一下。

是否可以接收

非加强型和非加强型的判断是否可以接收

他们的差别只是,format变量,一个是Flex封装好的。所以是写死的(DataGriditems)。一个是自己写的,是自己输入的,可变的。

3、其他都是一样的。

【教程】【FLEX】#005 拖动的更多相关文章

  1. duilib进阶教程 -- 改进窗口拖动 (12)

    现在大家应该都知道caption="0,0,0,32",是指示标题栏区了吧,如果想要整个窗口都能拖动呢? 那直接把高度改成和窗口一样不就得了~O(∩_∩)O~ 嗯,这样是可以,比如 ...

  2. Adobe Flex迷你教程 —Flex圆角容器

    在Flex3时代可以设置borderSides属性达到圆角效果,如:borderSides="top left right" ,在Flex4中borderSides属性貌似已经没有 ...

  3. Flex容器拖动(Bordercontainer为例)

    Bordercontainer的拖放到任意位置. mxml: 为Bordercontainer添加鼠标按下和弹起事件 <s:BorderContainer id="bdShow&quo ...

  4. Python基础教程(005)--为什么要学习Python?

    前言 为什么要选择Python学习 知识点 因为Python代码量少. 同样一个问题,用不同的语言,代码量差距还是很大的.一半情况下,Python是java的1比5,所以说,人生苦短,我用Python ...

  5. 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  6. 【实战项目】【FLEX】#900 实现拖控件功能

    一.功能说明:拖控件的功能(类似FLEX,VS 里面的拖控件). 提示:大家对事件的注册和派发的说法可能不一样.因为在FLEX中和在Java中,叫法有的区别.但是本质是一样的. 注册事件  == 设置 ...

  7. duilib进阶教程 -- 总结 (17)

    整个教程的代码下载:http://download.csdn.net/detail/qq316293804/6502207 (由于duilib进阶教程主要介绍界面,所以这个教程只给出界面相关的代码,完 ...

  8. Flex的基础用法【转】

    //获得屏幕的分辨率 var x:Number=Capabilities.screenResolutionX; var y:Number=Capabilities.screenResolutionY; ...

  9. Flex移动皮肤开发(二)

    范例文件 mobile-skinning-part2.zip 在这个讨论创建 Flex 移动 skin 的系列的 第 1 部分 中,我讨论了 Flex 团队在 Mobile 主题中所做的性能优化的原理 ...

随机推荐

  1. 监测代码执行时间之Stopwatch

    var sw = new System.Diagnostics.Stopwatch(); sw.Start(); 中间为要执行的代码 sw.Stop(); var msg = "上面操作耗时 ...

  2. 构造用于1个方法在多线程环境下重复多次执行测试的通用方法 C#

    static void MultithreadsCycleTestWithSameMethod(int threadNumber, int cycleNumber, ThreadStart actio ...

  3. 列表 enumerat 解包, 针对索引和元素

    dic = [1,2,3,4,5] for a,b in enumerate(dic): print(a,b) # a就是索引 b是元素

  4. css sprites的原理和作用

    CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...

  5. hihocoder 1485----hiho字符串

    hihocoder 1485:hiho字符串 描述 如果一个字符串恰好包含2个'h'.1个'i'和1个'o',我们就称这个字符串是hiho字符串. 例如"oihateher".&q ...

  6. Mac下git的环境搭建和基本使用

    前言本文将介绍git的基本概念.环境搭建.日常使用,主要针对刚接触git,或接触不久,或好久没用忘记的同学们,当然是基于mac环境的,window系统也是大同小异!本文将从以下几个模块介绍,希望能帮助 ...

  7. 润乾V4报表放入WEBINF保护目录下如何实现

     润乾报表放入WEBINF保护目录下如何实现 WEB-INF下面的文件都是受保护的,客户为了保护项目的文件不受到非法的访问,jsp页面都放在WEB-INF下,那润乾报表放入WEB-INF保护目录下 ...

  8. Charles基础

    一.Charles 监控其他设备连接方式 1.XP系统:控制面板——>Internet选项——>连接(tab)——>局域网(LAN)设置——>局域网设置——>代理服务器, ...

  9. leetCode题解之Reshape the Matrix

    1.题目描述 2.分析 使用了一个队列. 3.代码 vector<vector<int>> matrixReshape(vector<vector<int>& ...

  10. leveldb源码分析--WriteBatch

    从[leveldb源码分析--插入删除流程]和WriteBatch其名我们就很轻易的知道,这个是leveldb内部的一个批量写的结构,在leveldb为了提高插入和删除的效率,在其插入过程中都采用了批 ...