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，實現一個效果：只要在任一個顯示對象上按下鼠標按鍵，該顯示對象就會移到舞臺顯示列表的頂部，所以拖動的項目始終出現在頂部。效果圖如下：