Question

I’m trying to make a simple function to select and drag a MovieClip, without using the startDrag() function.

I have a few MCs on the stage, when mouse down on a MC, I want the MC to move with the mouse. But when I hold the mouse down, the MC starts to “tremble” and I’m not sure why.

I have the code inside each MC for other reasons. Here is what I have so far:

var selectX:Number; //x coordinate of mouse click (to select right point on mc on mouse down)


this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
this.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

function mouseDownHandler(e:MouseEvent):void {  
    selectX = this.x - mouseX;
    addEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
}


function mouseUpHandler(e:MouseEvent):void {
    mouseX2 = mouseX;
    removeEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
}

function onEnterFrameHandler(e:Event):void {
    this.x = mouseX + selectX + stage.x;
}

Answer 1

This is happening because you are using mouseX of the inside of the movieclip. but when you are trying to set the x of the movieClip it sets the x on the parent movieclip.

e.g.:

mainClip
|– DragableButton

when you adding DragableButton.x = 100, it is x position insided of the mainClip.
and when your code is taking mouseX inside of the DragableButton, the real mouseX = x + mouseX. and since mouseX inside of the DragableButton is equals e.g. 20, and you adding: selectX = this.x - mouseX -> if you have selectX = 100 – 20. but not 100 – 120 as it should be.

so if you still want to keep to your code change it a bit:

var selectX:Number; //x coordinate of mouse click (to select right point on mc on mouse down)
var mouseX2:Number;


this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
this.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

function mouseDownHandler(e:MouseEvent):void {  
    selectX = this.x - parent.mouseX;
    // selectX = this.x - stage.mouseX;
    addEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
}


function mouseUpHandler(e:MouseEvent):void {
    mouseX2 = parent.mouseX;
    removeEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
}

function onEnterFrameHandler(e:Event):void {
    this.x = parent.mouseX + selectX;
    // this.x = stage.mouseX + selectX;
}

p.s. stage.x = 0, it will be always. unless you change the property.
p.s.s. stage is only one and same instance no matter from which MC you are trying to get it.

my suggestion draging would be:

this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

function mouseDownHandler(e:MouseEvent):void
{ 
    this.startDrag();
    stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}


function mouseUpHandler(e:MouseEvent):void
{
    this.stopDrag();
    stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}