startDrag - stop diagonal movement

Is there a way to have a MovieClip with startDrag, but to force only horizontal and vertical (i.开发者_开发问答e. not diagonal) movement?

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;

}

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);
 }

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;           
    }

You can only constrain to one axis or the other (using a constraint rectangle) But diagonal movement would be possible in the method you propose, unless you also define some other limits... for example a grid.