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

Posted

技术标签:

【中文标题】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 希望这会引导您找到解决方案。

【讨论】:

以上是关于GWT 图像裁剪与浏览器中的拖放问题的主要内容,如果未能解决你的问题,请参考以下文章

可拖动 div 内的图像在拖动时停止了我的拖放

GWT 客户端图像裁剪和调整大小

ASP.NET Web 部件:非 IE 浏览器中的拖放支持

HTML5 拖放 getData() 仅适用于 Chrome 中的拖放事件?

HTML5 拖放 getData() 仅适用于 Chrome 中的拖放事件?

没有AJAX的拖放文件上传,在前台同步?