AS3 How to startdrag only on x-axis?

Question

I have a red square that I want to drag only on the x-axis. I've worked out a simple script, which theoretically should work, but it's not behaving properly. It's a bit hard to explain..the square keeps starting at the wrong position and the stage position seems to be changing so sometimes you can't drag the square all the way to the right...

red.buttonMode = true;
red.addEventListener(MouseEvent.MOUSE_DOWN, dragHandler);

function dragHandler(e:MouseEvent):void {
    var ypos:Number = e.currentTarget.y;
    var xpos:Number = e.currentTarget.x;

    e.currentTarget.startDrag(false,new Rectangle(-xpos,ypos,stage.stageWidth,0));
}


red.addEventListener(MouseEvent.MOUSE_UP, dropHandler);

function dropHandler(e:MouseEvent) {
    //trace("red up");
    e.currentTarget.stopDrag();
}

score 14 · Answer 1 · answered Jun 22 '11 at 11:30

Glad Marty's solution worked for you, although it is not too efficient (that MouseEvent.MOUSE_MOVE listener is a killer). The problem with your original code was that the rectangle in which you limit the dragging boundaries must be relative to the parent's coordinates. Also, depending on where you have the registration point of your square, you might have to take its width into account, if you don't want any part of it to move out of the stage.

For example, if your red square is directly on the stage, its registration point is located on its centre, and you want to limit the dragging to the whole x-axis of the stage, this will work:

e.currentTarget.startDrag(
       false,
       new Rectangle(
          e.currentTarget.width/2,
          e.currentTarget.y,
          stage.stageWidth-e.currentTarget.width,
          0
       )
);

the solution here is way better and probarly also the official solution, i tried the other one first because that was the top one, however locking with events is slow but also verry buggy, sometimes you can still move the object a little bit. — matthy, Sep 22 '14 at 16:55

Marty · Accepted Answer · 2011-06-22T01:44:33.547

You could try a different approach that incorporates MouseEvent.MOUSE_MOVE, as using a rectangle for a dynamic boundary would be tricky.

// define lock on y-axis
var LOCKY:Number = target.y;

// MouseEvent.MOUSE_MOVE
stage.addEventListener(MouseEvent.MOUSE_MOVE, _mouseMove);
function _mouseMove(e:MouseEvent):void
{
    if(target.y != LOCKY) target.y = LOCKY;
}

// dragging
target.addEventListener(MouseEvent.MOUSE_DOWN, _mouseDown);
function _mouseDown(e:MouseEvent):void
{
    target.startDrag();
    target.addEventListener(MouseEvent.MOUSE_UP, _mouseUp);
}

// dropping
function _mouseUp(e:MouseEvent):void
{
    target.stopDrag();
    target.removeEventListener(MouseEvent.MOUSE_UP, _mouseUp);
}

This is great! How can I modify this line to make it travel on an angled path? if(target.y != LOCKY) target.y = LOCKY; — Marsman, Aug 30 '13 at 16:11

score 0 · Answer 3 · answered Feb 27 '14 at 17:32

THIS WILL WORK ACTIONSCRIPT 3 (Semilla Sol Apps)

1- create your regular MOUSE DOWN and MOUSE UP event listeners

2- drop your 'startDrag' and 'stopDrag' elements in each function thereof respectively

HERE IS HOW TO LOCK DOWN THE AXIS:

1: create an event listener for the object you wish to restrict...in this example it's a movieclip instance named 'player':

player.addEventListener(Event.ENTER_FRAME, pLimiter);

HERE IS THE 'pLimter' FUNCTION:

function pLimiter(e:Event):void
{
    player.y = stage.stageHeight;
}

So in this case we are restricting 'drag' to only the x axis.

party on dude! (Semilla Sol Apps)

AS3 How to startdrag only on x-axis?

3 Answers3

Linked