图像裁剪：如何防止默认拖拽拖放操作？

Question

我正在开发一个图像裁剪器，并想问你以下问题：为了防止默认拖拽拖放动作当你按下图像上的左键并保持按下尝试移动鼠标，wouldn'它是跨浏览器，如果只是使用图片作为背景的div盒？

就像这样：

<div id="theDiv" style="background:url(pic.png) no-repeat;"></div> 

你怎么看？可以接受吗？不太难看？或者应该用JS来完成？

Answer 1

我会这样做，没有真正的其他方式（据我所知）做你想做的交叉浏览器。

Answer 2

你在使用框架吗？是不是每个人都有一个可靠的“dragstart”实现可以简单地返回false？如我错了请纠正我。

Answer 3

您可以设置自己的鼠标事件，这将是更合乎逻辑的方式。您甚至不需要在每个浏览器的基础上编写代码AFAIK。 这个事件处理程序也可以用来设置裁剪框架。

但是你的方法更简单，如果你还没有计划扩展这么多。

Answer 4

如果只是将图片用作div盒的背景，它不会是跨浏览器吗？

是的，但你仍然在开始拖动;如果您将指针移动到文本部分的页面中，您将选择文本，而这可能不是您想要的。

我会坚持x.ondragstart=x.onmousedown= function() { return false; };。

Answer 5

我可能会使用draggable="false"或ondrag="return false"，但您的方法同样适用。

Answer 6

例如，您可以看看this，这是一个用纯JavaScript编写的简单而快速的图像裁剪器。它使用mousedown来检测拖动结束时的拖动开始和mouseup。在拖动过程中，它将侦听document.onmousemove事件。