startDrag - stop diagonal movement

Question

有没有一种方法可以使用带有startDrag的MovieClip，而仅强制水平和垂直（即不对角线）运动？

Answer 1

yes. there are a few options.

A. you can choose to use the startDrag() function and supply it's 2nd parameter with a bounds rectangle for your draggable object. something like;

dragSprite.startDrag(false, new Rectangle(0, 0, 20, stage.stageHeight));

B. you can set your draggable object to listen for mouse events, moving it according to the mouse movements. something like:

dragSprite.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownEventHandler);

function mouseDownEventHandler(evt:MouseEvent):void
 {
 stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveEventHandler);
 stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpEventHandler);
 }

function mouseMoveEventHandler(evt:MouseEvent):void
 {
 //only move dragSprite horizontally
 //dragSprite.y = evt.stageY;
 dragSprite.x = evt.stageX;
 }

function mouseUpEventHandler(evt:MouseEvent):void
 {
 stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveEventHandler);
 stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpEventHandler);
 }

Answer 2

Here is my solution. It tracks the mouseX and mouseY on click and compares it to last position. Finds out which direction the mouse is mainly moving then moves the object there. You may want to add some extra logic to lock the object to the nearest 10th unit or whatever unit size you want to form a snap grid for use in games or organized placement of the object.

Update: I went ahead and added a snapNearest function to help control the movement.

import flash.events.MouseEvent;
import flash.events.Event;

dragObj.addEventListener(MouseEvent.MOUSE_DOWN, dragIt);

var curX:Number = 0;
var curY:Number = 0;
var oldX:Number = 0;
var oldY:Number = 0;
var gridUnit:Number = 25;

function dragIt(e:MouseEvent):void
{
    // set x,y on down
    oldX = mouseX;
    oldY = mouseY;

    // add mouse up listener so you know when it is released
    stage.addEventListener(MouseEvent.MOUSE_UP, dropIt);
    stage.addEventListener(Event.ENTER_FRAME, moveIt);

    trace("Start Drag")
}

function moveIt(e:Event):void
{

    // figure out what the main drag direction is and move the object.

    curX = mouseX;
    curY = mouseY;

    // figure out which is the larger number and subtract the smaller to get diff
    var xDiff:Number = curX > oldX ? curX - oldX : oldX - curX;
    var yDiff:Number = curY > oldY ? curY - oldY : oldY - curY;

    if(xDiff > yDiff) {
        dragObj.x = snapNearest(mouseX, gridUnit);
    }else{
        dragObj.y = snapNearest(mouseY, gridUnit);
    }

    oldX = mouseX;
    oldY = mouseY;
}

function dropIt(e:MouseEvent):void
{

    //remove mouse up event
    stage.removeEventListener(MouseEvent.MOUSE_UP, dropIt);
    stage.removeEventListener(Event.ENTER_FRAME, moveIt);

    trace("Stop Drag")

}


// snap to grid
function snapNearest(n:Number, units:Number):Number
{

    var num:Number = n/units ;
    num = Math.round(num);
    num *= units;

    return num;

}

Answer 3

You could use a modifier key, for instance normal behavior would be horizontal & press down the shift key to move vertically.

    function mouseMoveEventHandler(evt:MouseEvent):void
    {
        if(!evt.shiftKey)
           dragSprite.x = evt.stageX;
        else
           dragSprite.y = evt.stageY;           
    }

Answer 4

您只能约束到一个轴或另一个轴（使用约束矩形），但是在您建议的方法中可以进行对角线运动，除非您还定义了其他一些限制...例如网格。