Flex中UI组件拖拽的三种实现

一、最简单的是直接调用ui组件的startDrag方法和stopDragging方法，这2个方法是flash中的所有继承于Sprite类的组件类都支持的。适用于在同一个容器中的拖拽。

思路是监听需要拖拽的组件的MOUSE_DOWN和MOUSE_UP事件，剩下来的有flash帮你自动完成。

例子

     

  private static function init():void{

           myVBox.addEventListener(MouseEvent.MOUSE_DOWN,startDragging);

           myVBox.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

 

    }

// 按下鼠标按键时会调用此函数。

       private static function startDragging(event:MouseEvent):void

       {

           event.currentTarget.startDrag();

       }

       // 松开鼠标按键时会调用此函数。

       private static function stopDragging(event:MouseEvent):void

       {  

           event.currentTarget.stopDrag();

    }

 

 

二、借助DragManager实现拖拽。好处是可以方便的控制哪些容器支持被拖拽，也就是方便的订制拖拽的业务规则。适用于多个容器之间的拖拽。

假设把a组件从b容器拖拽到c容器

思路是对a监听鼠标MOUSE_DOWN事件，对c监听DRAG_ENTER和DRAG_DROP事件。其他的由flash完成。

例子

      

 private function init():void

       {

           a.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

           c.addEventListener(DragEvent.DRAG_ENTER,dragEnterHandler);

           c.addEventListener(DragEvent.DRAG_DROP,dragDropHandler);

    }

 

       private static function mouseDownHandler(event:MouseEvent):void

       {  

           var dragInitiator:UIComponent=UIComponent(event.currentTarget);

           var ds:DragSource = new DragSource();

           ds.addData(dragInitiator, "myRule");

           DragManager.doDrag(dragInitiator, ds, event);

       }

      

      

       private static function dragEnterHandler(event:DragEvent):void {

           if (event.dragSource.hasFormat("myRule "))

           {

              DragManager.acceptDragDrop(event.currentTarget);

           }

       }

      

       private static function dragDropHandler(event:DragEvent):void {

           var dragObject:UIComponent=UIComponent(event.dragInitiator);
           dragObject.x = Container(event.currentTarget).mouseX;

           dragObject.y =Container(event.currentTarget).mouseY;
           if(dragObject.parent!=event.currentTarget){
             Container(event.currentTarget).addChild(dragObject);
           }

   }

 

 以上的例子中，c只接受带有“myRule”格式文字的拖动对象

 

三、完全自己实现拖拽功能。拖拽无非是ui组件跟着鼠标移动。所以需要监听推拽逐渐的 MOUSE_DOWN，MOUSE_UP，MOUSE_MOVE事件，有时拖拽的目标容器也要监听MOUSE_UP事件。然后在MOUSE_MOVE事件的监听函数中改变ui组件的x和y值。相对前两种方法，这种方法实现起来就比较烦琐。具体事件这里就不写了.

 

    总之，在flash的拖拽实现要比在js中容易一些。