GWT image cropping vs. drag'n'drop problem in browser

Question

Using GWT, I am displaying an image on the web page and my goal is to allow the user to crop it. The user draws an imaginary boundary box by clicking on a specific part of the image, moving the mouse, and releasing it somewhere else. With the use of MouseDownHandler() and MouseUpHandler() , I am planning to record the start and end corners of the mouse cursor.

However, when I deploy my work on the web, there is this problem: When the user clicks on the image and tries to draw the imaginary bounding box, the web browser (Google Chrome in my case) detects it as a drag and drop operation.

Therefore, I cannot get my mouseDown() and mouseUp() functions to work. How can I avoid the browser to do a drag and drop operation?

The code:

public void onModuleLoad(){
    RootPanel.get().add(img1);

    img1.addMouseDownHandler(new MouseDownHandler() {
          @Override
          public void onMouseDown(MouseDownEvent event) {
              startX = event.getX();
              startY = event.getY();
          }
    });

    img1.addMouseUpHandler(new MouseUpHandler() {
          @Override
          public void onMouseUp(MouseUpEvent event) {
              endX = event.getX();
              endY = event.getY();
              img1.setVisibleRect(startX, startY, endX-startX, endY-startY);
          }
    });
}

Answer 1

Maybe you can use HTML5. I have found this earlier question here on Stack OverFlow that describes the same problem as you have. Also I found a code example on code.google.com Hopefully this will lead you to an solution.