创建拖放交互组件【flex】.doc

创建拖放交互组件创建拖放交互组件【flex】【flex】创建拖放交互组件【flex】移动显示对象的一个常见理由是要创建拖放交互组件，这样当用户单击某个对象时，在松开鼠标按键之前，该对象会随着鼠标的移动而移动在 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);。