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="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>

    <![CDATA[

        import mx.core.UIComponent;

        private function start(e:MouseEvent):void

        {

            var component:UIComponent=e.currentTarget as UIComponent

            component.startDrag();

        }

        private function stop(e:MouseEvent):void

        {

            var component:UIComponent=e.currentTarget as UIComponent

            component.stopDrag();

        }

        

    ]]>

</mx:Script>

    <mx:Canvas x="0" y="0" width="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="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="flowdesigner.*" creationComplete="init()">

    <mx:Script>

        <![CDATA[

            import flowdesigner.ActivityNode;

            import ui.action.ObjectHandles;

            private var mouseDownPosition:Point=null;

            private 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);

            }

            

            public function containerMouseMoveHandler(e:MouseEvent):void

            {

                var currentPoint:Point=container.globalToLocal(new Point(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;

            }

            

            public 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%" height="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="http://www.adobe.com/2006/mxml" layout="absolute">

    <mx:Script>

        <![CDATA[

            import mx.containers.Canvas;

            import mx.core.DragSource;

            import mx.managers.DragManager;

            import mx.controls.Image;

            import mx.events.DragEvent;

            private function beginDrag(e:MouseEvent):void

            {

                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);

            }

            

            private function acceptDrag(e:DragEvent):void

            {

                var container:Canvas=e.currentTarget as Canvas;

                DragManager.acceptDragDrop(container);

            }

            

            private function completeDrag(e:DragEvent):void

            {

                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,function(e:MouseEvent):void{Image(e.currentTarget).stopDrag();});

                var container:Canvas=e.currentTarget as Canvas;

                container.addChild(img);

            }

        ]]>

    </mx:Script>

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

        <mx:Canvas width="100%" height="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事件处理函数中进行拖动完成的相关处理，本例中是向容器中增加图形。