Image pan and zoom with GWT

Question

I have a fixed size image and I want to show a subset of the image. I want to allow the user to click and drag to move the visible area of the image.

The Image class has a nice setUrlAndVisibleRect method which can handle the image area display. The problem I am having is getting the mouse click and drag to work.

I registered Mouse Down/Up/Move handlers and it all looked very promising in Firefox. Then I tested it in IE8...

The behaviour I see in IE8 as I click and drag: - MouseDown event when I click - browser then displays a "no entry" symbol cursor as I drag - finally when I release I get no mouse up event.

What is the correct way to handle this in a cross browser fashion?

Answer 1

You want to use MouseDownEvent.preventDefault(). This prevents the browser from taking the default action for the event, which is to initiate the drag action that you see.

If that doesn't work try MouseMoveEvent.preventDefault(). One of them will kill it.