flashCS3拖放组件

创建拖放交互组件

移动显示对象的一个常见理由是要创建拖放交互组件，这样当用户单击某个对象时，在松开鼠标按键之前，该对象会随着鼠标的移动而移动。在 ActionScript 中可以采用两种方法创建拖放交互组件。在每种情况下，都会使用两个鼠标事件：按下鼠标按键时，通知对象跟随鼠标光标；松开鼠标按键时，通知对象停止跟随鼠标光标。

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

// 此代码使用 startDrag()
// 技术创建拖放交互组件。
// 正方形是一个 DisplayObject（例如 MovieClip 或 Sprite 实例）。
import flash.events.MouseEvent;
// 按下鼠标按键时会调用此函数。
function startDragging(event:MouseEvent):void
{
square.startDrag();
}
// 松开鼠标按键时会调用此函数。
function stopDragging(event:MouseEvent):void
{
square.stopDrag();
}
square.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
square.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

这种方法有一个非常大的限制：每次只能使用 startDrag() 拖动一个项目。如果正在拖动一个显示对象，然后对另一个显示对象调用了 startDrag() 方法，则第一个显示对象会立即停止跟随鼠标。例如，如果 startDragging() 函数如下发生了更改，则只拖动 circle 对象，而不管 square.startDrag() 方法调用：

function startDragging(event:MouseEvent):void
{
square.startDrag();
circle.startDrag();
}

由于每次只能使用 startDrag() 拖动一个对象，因此，可以对任何显示对象调用 stopDrag() 方法，这会停止当前正在拖动的任何对象。

如果需要拖动多个显示对象，或者为了避免多个对象可能会使用 startDrag() 而发生冲突，最好使用鼠标跟随方法来创建拖动效果。通过这种技术，当按下鼠标按键时，会将函数作为舞台的 mouseMove 事件的侦听器来订阅。然后，每次鼠标移动时都会调用此函数，它将使所拖动的对象跳到鼠标所在的 x,y 坐标。松开鼠标按键后，取消此函数作为侦听器的订阅，这意味着鼠标移动时不再调用该函数且对象停止跟随鼠标光标。下面是演示说明此技术的一些代码：

// 此代码使用鼠标跟随
// 技术创建拖放交互组件。
// 圆是一个 DisplayObject（例如 MovieClip 或 Sprite 实例）。
import flash.events.MouseEvent;
var offsetX:Number;
var offsetY:Number;
// 按下鼠标按键时会调用此函数。
function startDragging(event:MouseEvent):void
{
// 记录按下鼠标按键时光标的位置
// 与按下鼠标按键时圆的 x, y
// 坐标之间的差异（偏移量）。
offsetX = event.stageX - circle.x;
offsetY = event.stageY - circle.y;
// 通知 Flash Player 开始侦听 mouseMove 事件
stage.addEventListener(MouseEvent.MOUSE_MOVE, dragCircle);
}
// 松开鼠标按键时会调用此函数。
function stopDragging(event:MouseEvent):void
{
// 通知 Flash Player 停止侦听 mouseMove 事件。
stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragCircle);
}
// 只要按下鼠标按键，
// 每次移动鼠标时都会调用此函数。
function dragCircle(event:MouseEvent):void
{
// 将圆移到光标的位置，从而保持
// 光标的位置和拖动对象的位置
// 之间的偏移量。
circle.x = event.stageX - offsetX;
circle.y = event.stageY - offsetY;
// 指示 Flash Player 在此事件后刷新屏幕。
event.updateAfterEvent();
}
circle.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
circle.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

除了使显示对象跟随鼠标光标之外，拖放交互组件的共有部分还包括将拖动对象移到显示对象的前面，以使拖动对象好像浮动在所有其它对象之上。例如，假定您有两个对象（圆和正方形），它们都有一个拖放交互组件。如果圆在显示列表中出现在正方形之下，您单击并拖动圆时光标会出现在正方形之上，圆好像在正方形之后滑动，这样中断了拖放视觉效果。您可以使用拖放交互组件避免这一点，以便在单击圆时圆移到显示列表的顶部，使圆会始终出现在其它任何内容的顶部。

下面的代码（摘自前面的示例）用于创建两个显示对象（圆和正方形）的拖放交互组件。只要在任一个显示对象上按下鼠标按键，该显示对象就会移到舞台显示列表的顶部，所以拖动的项目始终出现在顶部。新代码或以前代码中经过更改的代码用粗体显示。

// 此代码使用鼠标跟随
// 技术创建拖放交互组件。
// 圆和正方形是 DisplayObject（例如 MovieClip 或 Sprite
// 实例）。
import flash.display.DisplayObject;
import flash.events.MouseEvent;
var offsetX:Number;
var offsetY:Number;
var draggedObject:DisplayObject;
// 按下鼠标按键时会调用此函数。
function startDragging(event:MouseEvent):void
{
    // 记住正在拖动的对象
    draggedObject = DisplayObject(event.target);
// 记录按下鼠标按键时光标的位置
// 与按下鼠标按键时拖动的对象的 x, y 坐标
// 之间的差异（偏移量）。
offsetX = event.stageX - draggedObject.x;
offsetY = event.stageY - draggedObject.y;
    // 将所选对象移到显示列表的顶部
    stage.addChild(draggedObject);
// 通知 Flash Player 开始侦听 mouseMove 事件。
stage.addEventListener(MouseEvent.MOUSE_MOVE, dragObject);
}
// 松开鼠标按键时会调用此函数。
function stopDragging(event:MouseEvent):void
{
// 通知 Flash Player 停止侦听 mouseMove 事件。
stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragObject);
}
// 只要按下鼠标按键，
// 每次移动鼠标时都会调用此函数。
function dragObject(event:MouseEvent):void
{
// 将拖动的对象移到光标的位置，从而保持
// 光标的位置和拖动的对象的位置
// 之间的偏移量。
draggedObject.x = event.stageX - offsetX;
draggedObject.y = event.stageY - offsetY;
// 指示 Flash Player 在此事件后刷新屏幕。
event.updateAfterEvent();
}
circle.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
circle.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
square.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
square.addEventListener(MouseEvent.MOUSE_UP, stopDragging);