mouseX/Y confusion when dragging a child of a container

Question

I've got a grid of images which are added to a imagecontainer(Sprite) in a class. When I click a button, the imagecontainer gets tweened(scaled) to 0.2 Now I would like to start dragging around the images. on mouse-down I add an enterFrame Event:

function onEnterFrame(e:Event):void
{
  imagecontainer.image.x = this.mouseX;
  imagecontainer.image.y = this.mouseY;

}

Unfortunately the image is never on the mouseposition but has a increasing/decreasing offset to the mouse pointer. The alternative, startDrag/stopDrag works perfectly, but I still need the mouseX/mouseY for placing the image on a grid… I tried also parent.mouseX, no luck with that. Why is this happening? I thought mouseX/mouseY is always depending on the stage-dimension.

score 4 · Accepted Answer · answered May 25 '11 at 23:56

4

have you tried:

function onEnterFrame(e:Event):void
{
  imagecontainer.image.x = stage.mouseX;
  imagecontainer.image.y = stage.mouseY;

}

answered May 25 '11 at 23:56

locrizak

12,192
12
60
80

Jep I tried that, actually I just found out: the enterframe-eventlistener is attached to an image, therefore I can say: e.target.x = e.target.parent.mouseX - e.target.mouseX, don't now why but it works... – algro May 26 '11 at 00:00
It works because e.target holds whatever object is listening for the event. Glad you figured it out. – locrizak May 26 '11 at 00:09

Marty · Answer 2 · 2011-05-26T00:15:26.377

If you want to get the mouseX and mouseY relative to the mouse position on the stage then why don't you use:

stage.mouseX,
stage.mouseY

Also, if you scale something up (let's say to a total size of 200%), then 50 pixels across on the stage is actually 25 pixels across in the container that has been scaled.

Use this as a document class to see what I mean:

package
{
    import flash.display.MovieClip;
    import flash.events.Event;

    public class Main extends MovieClip
    {
        private var _box:MovieClip;

        public function Main()
        {
            addEventListener(Event.ENTER_FRAME, _move);

            _box = new MovieClip();
            _box.scaleX = _box.scaleY = 2;

            addChild(_box);
        }

        private function _move(e:Event):void
        {
            trace("stage: " + stage.mouseX + ", " + stage.mouseY);
            trace("box: " + _box.mouseX + ", " + _box.mouseY);
        }
    }
}

score 1 · Answer 3 · edited Jan 09 '16 at 13:03

If you are still looking for this maybe you can use startDrag(); and stopDrag(); for dragging images.

like this:

    image.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownMC);
    image.addEventListener(MouseEvent.MOUSE_UP, onMouseUpMC);

    function onMouseDownMC(e:MouseEvent):void
    {
        e.currentTarget.startDrag(true);
    }
    function onMouseUpMC(e:MouseEvent):void
    {
        e.currentTarget.stopDrag();
    }

Update : You can set ur function like this:

image.addEventListener(MouseEvent.MOUSE_DOWN, onMouseMC);
image.addEventListener(MouseEvent.MOUSE_UP, onMouseMC);

function onMouseMC(e:MouseEvent):void
{
    var type = e.type;
    if(type == MouseEvent.MOUSE_DOWN) /// u can use "mouseDown" accept  MouseEvent.MOUSE_DOWN 
    {
        e.currentTarget.startDrag(true);// if you set true its gonna drag the obj from center
    }
    else if(type == MouseEvent.MOUSE_UP)
    {
        e.currentTarget.stopDrag();  //u can use "mouseUp" accept  MouseEvent.MOUSE_UP
    }
}

mouseX/Y confusion when dragging a child of a container

3 Answers3