2

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);
          }
    });
}
yunusual
  • 325
  • 3
  • 9
  • 1
    I think this is not possible. You will have to find an other workaround for this... I have a look on it tonight. – tim_a Apr 20 '11 at 16:25
  • 2
    I have found the solution in a totally unrelated example. By adding the statement "event.preventDefault();" in the MouseDownHandler and MouseUpHandler, the drag and drop mechanism is prevented. Thanks for the ones who posted and helped out. – yunusual Apr 21 '11 at 16:37
  • nice you share this with us. Didn't know you could prevent it! – tim_a Apr 21 '11 at 18:01

1 Answers1

0

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.

Community
  • 1
  • 1
tim_a
  • 940
  • 1
  • 7
  • 20