GWT 图像裁剪与浏览器中的拖放问题

Posted 2023-02-25

【中文标题】GWT 图像裁剪与浏览器中的拖放问题

【英文标题】：GWT image cropping vs. drag'n'drop problem in browser

【发布时间】：2011-04-20 14:37:43

【问题描述】：

使用 GWT，我在网页上显示图像，我的目标是允许用户裁剪它。用户通过单击图像的特定部分、移动鼠标​​并将其释放到其他地方来绘制一个假想的边界框。配合MouseDownHandler()和MouseUpHandler()的使用，我打算记录下鼠标光标的起止角。

但是，当我在网络上部署我的工作时，出现了这个问题：当用户单击图像并尝试绘制想象的边界框时，网络浏览器（在我的情况下为 Google Chrome）将其检测为拖动和drop操作。

因此，我的 mouseDown() 和 mouseUp() 函数无法正常工作。如何避免浏览器做拖拽操作？

代码：

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);
          
    );

【问题讨论】：

我认为这是不可能的。您将不得不为此找到其他解决方法...我今晚看看。

我在一个完全不相关的例子中找到了解决方案。通过添加语句“event.preventDefault();”在 MouseDownHandler 和 MouseUpHandler 中，阻止了拖放机制。感谢那些发帖并提供帮助的人。

很高兴你与我们分享这个。不知道你能阻止它！

【参考方案1】：

也许您可以使用 html5。我在 Stack OverFlow 上找到了 this 较早的问题，它描述了与您相同的问题。我还在 code.google.com 上找到了code example 希望这会引导您找到解决方案。