How to get mouse position outside Flex Panel on right-mouse down event?

Question

I am creating a Flex Panel, which has an image on it. I have set the "buttonMode" and "useHandCursor" property of the image to true. So, whenever I do a mouse over, the cursor changes into a hand tool. I am able to set the right-mouse-down, right-mouse-up, mouse-move events on it. But, I see that the mouse-move event is not working properly.

For eg, when user right clicks on the image in Flex panel and then drags the mouse(while right mouse down) outside the Flex panel, I want to get the current position of mouse while user is dragging the mouse. But If i do the same thing on mouse down then everything works properly. Can anyone guide me why I am not able to do so in mouse right click?

Thanks!

Please post your code. Without seeing the code, it is difficult to give any solution. — sohel khalifa

Josh Josh · Accepted Answer · 2012-10-10T16:17:29

Assuming you are using a MOUSE_DOWN -> MOUSE_MOVE -> MOUSE_UP process, you could use this. It was originally used as the answer for someone wanting smooth drag and drop. You can see the answer here.

import flash.display.*;
import flash.events.*;


var startX:Number;
var startY:Number;
var shape:Sprite = new Sprite();
shape.graphics.beginFill(0x000000);
shape.graphics.drawRect(0,0,50,50);
shape.graphics.endFill();
this.addChild(shape);

shape.addEventListener(MouseEvent.MOUSE_DOWN,this.mouseDown);

function mouseDown(e:MouseEvent = null):void{
    stage.frameRate = 60;
    startX = stage.mouseX - shape.x;
    startY = stage.mouseY - shape.y;
    stage.addEventListener(MouseEvent.MOUSE_MOVE,this.mouseMove);
    shape.addEventListener(MouseEvent.MOUSE_UP,this.mouseUp);
}

function mouseMove(e:MouseEvent = null):void{
    shape.x = stage.mouseX - startX;
    shape.y = stage.mouseY - startY;
}

function mouseUp(e:MouseEvent = null):void{
    shape.removeEventListener(MouseEvent.MOUSE_UP,this.mouseUp);
    stage.removeEventListener(MouseEvent.MOUSE_MOVE,this.mouseMove);
    stage.frameRate = 24;
}

Basically, to accomplish what you want, the MOUSE_MOVE event listener must be attached to the stage, rather than the Panel or Image. You listen for a MOUSE_DOWN (or right click) on the image, then add the MOUSE_MOVE and MOUSE_UP events. My framerate changes are unnecessary, but was needed in order to get the smooth drag that the original asker wanted. I also compensate for mouse position within the object in that code as well. The key is definitely to add the MOUSE_MOVE event to the stage and listen for stage.mouseX and stage.mouseY, rather than adding it to the Panel or image and listening for target.mouseX/mouseY or event.localX/localY.

I don't think this is being used for mobile, but if it is and you are using a forced DPI, make sure you use FlexGlobals.topApplication.systemManager.mouseX/mouseY instead of stage.mouseX and stage.mouseY. The SystemManager class accounts for DPI changes and the Stage class does not.

How to get mouse position outside Flex Panel on right-mouse down event?

1 Answers