【教程】【FLEX】#005 拖动

2021-07-15 18:36:44

在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封装好的。所以是写死的（DataGrid用 items）。一个是自己写的，是自己输入的，可变的。

3、其他都是一样的。

码农公寓

相关文章