Flex拖动实现方法-孙镜涛

????在交互性要求较高的系统中，拖动是一种比较常用的技术，例如，我们经常用到权限定制、数据导入导出定制等功能，这种情况下，一般是目标数据集合已经确定，用户需要从已有的集合中选择条目，使用拖动完成实现起来比较直观，友好；有些场景下需要允许容器内的元素能够自由拖动，例如一些图形设计工具。在Flex中，它本身就提供了很多支持拖动的特性，很多情况下，这些特性能够简化我们的开发，但是也有一些情况是需要我们自定义实现的。本文介绍了三种flex中进行拖动的方法。

方法一：List中数据的拖动

<?xml version="1.0" encoding="utf-8"?>

<mx:Application?xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

????<mx:List?dragEnabled="true" width="162" labelField="Name">

????????<mx:Array>

????????????<mx:Object?Name="Item a"/>

????????????<mx:Object?Name="Item b"/>

????????????<mx:Object?Name="Item c"/>

????????</mx:Array>

????</mx:List>

????<mx:List?dropEnabled="true" x="196" y="0" width="171" labelField="Name">

????</mx:List>

</mx:Application>

通过指定List的dragEnabled=true来允许List控件数据支持拖动，指定dropEnabled=true来允许List控件支持接受拖动数据。

方法二：容器中控件的拖动

这种方式下控件的拖动有两种方法，一种是利用Flex自身的实现，一种是使用自定义的实现。对于Flex内的所有可视控件，都支持startDrag()和stopDrag()方法，我们通过定制相应的事件即可完成拖动的操作。例如：

<?xml version="1.0" encoding="utf-8"?>

<mx:Application?xmlns:mx="absolute">

<mx:Script>

????<![CDATA[

????????import?mx.core.UIComponent;

????????private?function?start(e:MouseEvent):void

????????{

????????????var?component:UIComponent=e.currentTarget?as?UIComponent

????????????component.startDrag();

????????}

????????function?stop(e:MouseEvent):as?UIComponent

????????????component.stopDrag();

????????}

????????

????]]>

</mx:Script>

????<mx:Canvas?x="0" y="100%" height="100%">

????????<mx:Button?x="237" y="69" label="Button" mouseDown="start(event)" mouseUp="stop(event)"/>

????????<mx:CheckBox?x="424" y="49" label="Checkbox" mouseDown="start(event)" mouseUp="stop(event)"/>

????????<mx:Image?x="344" y="138" mouseDown="start(event)" mouseUp="stop(event)"/>

????????<mx:Label?x="267" y="233" text="Label" mouseDown="start(event)" mouseUp="stop(event)"/>

????????<mx:TextInput?x="412" y="196" mouseDown="start(event)" mouseUp="stop(event)"/>

????</mx:Canvas>

</mx:Application>

第二种方法就是自定义拖动的实现，主要的原理就是：在控件mouseDown之后，给所处的container注册mouseMove和mouseUp事件及处理函数；mouseMove的时候计算鼠标移动的值，然后将控件坐标做相应的改变，mouseUp的时候移除mouseMove和mouseUp处理函数。

代码如下：

<?xml version="1.0" encoding="utf-8"?>

<mx:Application?xmlns:mx="absolute" xmlns:ns1="flowdesigner.*" creationComplete="init()">

????<mx:Script>

????????<![CDATA[

????????????import?flowdesigner.ActivityNode;

????????????import?ui.action.ObjectHandles;

????????????private?var?mouseDownPosition:Point=null;

????????????function?init():void

????????????{

????????????????toDrag.addEventListener(MouseEvent.MOUSE_DOWN,componentMouseDownHandler);

????????????}

????????????public?function?componentMouseDownHandler(e:MouseEvent):void

????????????{

????????????????container.stage.addEventListener(MouseEvent.MOUSE_MOVE,containerMouseMoveHandler);

????????????????container.stage.addEventListener(MouseEvent.MOUSE_UP,containerMouseUpHandler);

????????????????mouseDownPosition=new?Point(e.stageX,e.stageY);

????????????}

????????????

????????????function?containerMouseMoveHandler(e:MouseEvent):void

????????????{

????????????????var?currentPoint:Point=container.globalToLocal(newPoint(e.stageX,e.stageY));

????????????????var?temp:Point=container.globalToLocal(mouseDownPosition);

????????????????var?transation_x:int=currentPoint.x-temp.x;

????????????????var?transation_y:int=currentPoint.y-temp.y;

????????????????toDrag.x=mouseDownPosition.x+transation_x;

????????????????toDrag.y=mouseDownPosition.y+transation_y;

????????????}

????????????

????????????function?containerMouseUpHandler(e:MouseEvent):void

????????????{

????????????????container.stage.removeEventListener(MouseEvent.MOUSE_MOVE,containerMouseMoveHandler);

????????????????container.stage.removeEventListener(MouseEvent.MOUSE_UP,containerMouseUpHandler);

????????????}

????????]]>

????</mx:Script>

????<ns1:DrawCanvas?id="container" width="100%" backgroundColor="#FFFDFD">

????????<mx:Canvas?id="toDrag" width="121" height="82" backgroundColor="#BA8080"/>

????</ns1:DrawCanvas>

</mx:Application>

Init中给需要拖动的控件注册mouseDown处理函数；鼠标按下的时候给容器注册mouseMove和mouseUp处理函数，同时记录初始坐标值；mouseMove的时候，将当前事件坐标值和原始坐标值分别转换为容器中相对坐标值，然后计算x、y坐标轴上的相对移动距离，最后设置控件坐标值；mouseUp时取消相应的事件处理。

方法三：自定义拖动

这种方式一般能够满足大多数的情景，通过DragManager自己实现dragEnter，dragDrop事件来完成拖动功能。

DragManager 类管理拖放操作。当用户使用鼠标选择某个项目时，所选组件称为拖动启动器。拖动操作期间显示的图像称为拖动代理。当用户将拖动代理移动到其它组件时，系统会向该组件发送?dragEnter?事件。如果该组件接受拖动，即可成为拖放目标，并接收?dragOver、dragExit?和?dragDrop?事件。拖动操作完成后，会向拖动启动器发送?dragComplete?事件。DragSource 类中包含正被拖动的数据。

代码如下：

<?xml version="1.0" encoding="utf-8"?>

<mx:Application?xmlns:mx="absolute">

????import?mx.containers.Canvas;

????????????import?mx.core.DragSource;

????????????import?mx.managers.DragManager;

????????????import?mx.controls.Image;

????????????import?mx.events.DragEvent;

????????????function?beginDrag(e:MouseEvent):var?img:Image=e.currentTarget?as?Image;

????????????????var?dragImg:Image=new?Image();

????????????????dragImg.source=img.source;

????????????????var?ds:DragSource=new?DragSource();

????????????????ds.addData(img,"dragSource");

????????????????DragManager.doDrag(img,ds,e,dragImg);

????????????}

????????????

????????????function?acceptDrag(e:DragEvent):var?container:Canvas=e.currentTarget?as?Canvas;

????????????????DragManager.acceptDragDrop(container);

????????????}

????????????

????????????function?completeDrag(e:DragEvent):var?dragTarget:Image=e.dragSource.dataForFormat("dragSource")as?Image;

????????????????var?img:Image=new?Image();

????????????????img.source=dragTarget.source;

????????????????img.addEventListener(MouseEvent.MOUSE_DOWN,function(e:MouseEvent):void{Image(e.currentTarget).startDrag();});

????????????????img.addEventListener(MouseEvent.MOUSE_UP,255)">void{Image(e.currentTarget).stopDrag();});

????????????????as?Canvas;

????????????????container.addChild(img);

????????????}

????????]]>

????</mx:Script>

????<mx:VBox?x="56" y="61" width="520" height="435">

????????<mx:Canvas?width="40" x="20" y="50">

????????????<mx:Image?source="assets/test.gif" mouseDown="beginDrag(event)" width="23" height="19" x="10" y="11"/>

????????</mx:Canvas>

????????<mx:Canvas?width="448" height="358" dragEnter="acceptDrag(event)" dragDrop="completeDrag(event)" borderColor="#39749D" borderStyle="solid" backgroundColor="#EDE5E5">

????????????

????????</mx:Canvas>

????</mx:VBox>

</mx:Application>

首先，我们对需要拖动的对象增加mouseDown处理函数，本例中是对image对象进行拖动，mouseDown中首先获取当前事件对象，然后创建一个副本，同时将该副本作为拖动源，通过DragManager开始拖动；对于接受拖动对象的容器dragEnter时通过DragManager.acceptDragDrop来指定该容器可接受拖动对象，最后在接受拖动对象容器的dragDrop事件处理函数中进行拖动完成的相关处理，本例中是向容器中增加图形。