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

Posted 2023-02-25

【中文标题】图像裁剪器：如何防止默认的拖放操作？

【英文标题】：An image cropper: How to prevent the default drag n' drop action?

【发布时间】：2009-11-27 11:20:22

【问题描述】：

我正在开发一个图像裁剪器，想问您以下问题：为了防止在您按下图像上的左键并按住它时出现默认的拖放操作，请尝试移动鼠标，如果只是将图片用作div框的背景，那不是跨浏览器吗？

就这样：

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

你怎么看？可以接受吗？不会太丑吧？还是应该用JS来做？

【参考方案1】：

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

【参考方案2】：

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

【讨论】：

查看同一张海报的***.com/questions/1807334/…

【参考方案3】：

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

但如果您不打算扩展这么多，您的方法会更简单。

【参考方案4】：

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

是的，但你仍然会开始拖累；如果您将指针移到包含文本的页面部分，您将选择文本，这可能是您不想要的。

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

【参考方案5】：

我可能会使用draggable="false" 或ondrag="return false"，但你的方法也同样有效。

【参考方案6】：

你可以看看this，这是一个用纯 javascript 编写的简单快速的图像裁剪器。它使用 mousedown 检测拖动开始，使用 mouseup 检测拖动结束。在拖动过程中，它会监听document.onmousemove 事件。