ActionScript3 实现拖拽功能

根据项目的需求实现与flex交互――拖拽控件。写此文仅为初学者参考。

在 ActionScript 中可以采用两种方法创建拖放交互组件。在每种情况下，都会使用两个鼠标事件：(1)按下鼠标按键时，通知对象跟随鼠标光标；(2)松开鼠标按键时，通知对象停止跟随鼠标光标。

第一种方法：使用 startDrag() 方法，它比较简单，但限制较多。按下鼠标按键时，将调用要拖动的显示对象的 startDrag() 方法。松开鼠标按键时，将调 stopDrag() 方法。做个例子代码如下：

package
{
   import flash.display.MovieClip;
   import flash.display.Shape;
   import flash.display.Sprite;
   import flash.events.Event;
   import flash.events.MouseEvent;

   public class drawDrag extends Sprite
  {
    var myRect:Sprite = new Sprite();
    var myCircle:Sprite = new Sprite(); //创建Sprite实例
     public function drawDrag(): void
    {
       //矩形的填充色
      myRect.graphics.beginFill(0x0000FF);
       //绘制矩形，参数依次是 坐标轴x，坐标轴y，矩形长度，矩形的宽
      myRect.graphics.drawRect(200,200,20,15);
       this.addChild(myRect); //画布上面加载矩形
      
      myCircle.graphics.beginFill(0x33FF33);
      myCircle.graphics.drawCircle(100,100,20);
       this.addChild( this.myCircle);
       //添加元素事件
      myCircle.addEventListener(MouseEvent.MOUSE_DOWN,mouseDown);
      myCircle.addEventListener(MouseEvent.MOUSE_UP,mouseUp);
      myRect.addEventListener(MouseEvent.MOUSE_DOWN,mouseDown);
      myRect.addEventListener(MouseEvent.MOUSE_UP,mouseUp);
    }
     //触发鼠标mouseDown事件开始拖拽
    function mouseDown(event:MouseEvent): void
    {
      event.target.startDrag();
    }
     //触发鼠标mouseUp事件停止拖拽
    function mouseUp(event:MouseEvent): void
    {
      event.target.stopDrag();
    }
    
  }
}

这种方法有一个非常大的限制：每次只能使用 startDrag() 拖动一个项目。如果正在拖动一个显示对象，然后对另一个显示对象调用了 startDrag() 方法，则第一个显示对象会立即停止跟随鼠标。

第二种方法：鼠标跟随方法，即当按下鼠标按键时，会将函数作为舞台的 mouseMove 事件的侦听器来订阅。然后，每次鼠标移动时都会调用此函数，它将使所拖动的对象跳到鼠标所在的 x,y 坐标。松开鼠标按键后，取消此函数作为侦听器的订阅，这意味着鼠标移动时不再调用该函数且对象停止跟随鼠标光标。下面是演示说明此技术的一些代码：

package
{
   import flash.display.*;
   import flash.events.*;
   import flash.filters.*;
   import flash.geom.*;
   import flash.ui.Mouse;
  
   public class drawDrag2 extends Sprite
  {
    var myCircle:Sprite = new Sprite();
    var offsetX:Number;
    var offsetY:Number;
    var myRect:Sprite = new Sprite();
    var draggedObject:DisplayObject;
     public function drawDrag2()
    {
       //圆的填充色
      myCircle.graphics.beginFill(0xFFFF33);
      myRect.graphics.beginFill(0x3333CC);
       //圆的初始化位置
      myCircle.graphics.drawCircle(150,150,20);
      myRect.graphics.drawRect(300,200,30,20);
       //加载圆形
       this.addChild(myCircle);
       this.addChild(myRect);
      myRect.addEventListener(MouseEvent.MOUSE_DOWN,startDraging);
      myRect.addEventListener(MouseEvent.MOUSE_UP,stopDraging);
      myCircle.addEventListener(MouseEvent.MOUSE_DOWN,startDraging);
      myCircle.addEventListener(MouseEvent.MOUSE_UP,stopDraging);
    }
    
     public function startDraging(event:MouseEvent): void
    {
      draggedObject = DisplayObject(event.target); //实现拖拽空间放在最上端
       //记录鼠标按下时光标的位置和移动图形的xy，求出他们之间的偏移量
      offsetX =event.stageX - draggedObject.x;
      offsetY = event.stageY - draggedObject.y;
      stage.addChild(draggedObject);
       //开始监听mouseMove事件
      stage.addEventListener(MouseEvent.MOUSE_MOVE,dragCircle);
    }
    
     public function stopDraging(event:MouseEvent): void
    {
       //停止监听mouseMove事件
      stage.removeEventListener(MouseEvent.MOUSE_MOVE,dragCircle);
    }
    
     //移动鼠标执行该函数
     public function dragCircle(event:MouseEvent): void
    {
       //确定当前图形的xy坐标值
      draggedObject.x = event.stageX - offsetX;
      draggedObject.y = event.stageY - offsetY;
      event.updateAfterEvent(); //刷新屏幕
    }
    
    
    
  }
}

var draggedObject:DisplayObject，实现一个效果：只要在任一个显示对象上按下鼠标按键，该显示对象就会移到舞台显示列表的顶部，所以拖动的项目始终出现在顶部。效果图如下：