图像裁剪器：如何防止默认拖动 n'放弃行动？
我正在开发一个图像裁剪器，想问您以下问题：为了防止当您按下图像上的左键并保持按下状态时默认的拖放操作，请尝试移动鼠标，不是吗？如果只使用图片作为 div 框的背景，可以跨浏览器吗？
就像这样：
<div id="theDiv" style="background:url(pic.png) no-repeat;"></div>
你觉得怎么样？可以接受吗？是不是太丑了？还是应该用JS来完成？
I am developing an image cropper and would like to ask you the following question: In order to prevent the default drag n' drop action when you press the left button on an image and keeping it pressed try to move the mouse, wouldn't it be cross-browser if to just use the picture as a background to a div box?
Just like so:
<div id="theDiv" style="background:url(pic.png) no-repeat;"></div>
How do you think? Is it acceptable? Not too ugly? Or should be done with JS?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
我也会做同样的事情，没有真正的其他方法（据我所知）可以做你想做的跨浏览器事情。
I would do the same, there is no real other way (as far as I know of) of doing what you want to do crossbrowser.
你使用框架吗？难道它们中的每一个都没有可靠的“dragstart”实现，可以简单地返回 false 吗？如果我错了请纠正我。
Are you using a framework? Isn't there a reliable "dragstart" implementation in each of them that can simply be made return false? Correct me if I'm wrong.
您可以设置自己的鼠标事件，这将更符合逻辑。据我所知，您甚至不需要为每个浏览器编写代码。
该事件处理程序也可用于设置裁剪框。
但如果您不打算扩展这么多，那么您的方法会更简单。
You can set your own mouse events which will be more logical way. You will not even need to write code on per-browser basis AFAIK.
This event handlers can be used to set crop frame also.
But your approach is simpler, if you haven't plans on extend this much .
是的，但你仍然会开始拖累；如果您将指针移至包含文本的页面部分，您将选择您可能不想要的文本。
我会坚持使用 x.ondragstart=x.onmousedown= function() { return false; };。
Yes, but you'd still be starting a drag; if you moved the pointer over into part of the page with text in, you'd be selecting the text, which you probably wouldn't want.
I'd stick with the
x.ondragstart=x.onmousedown= function() { return false; };.我可能会使用
draggable="false"或ondrag="return false"但你的方法也同样有效。I might use
draggable="false"orondrag="return false"but your method works just as well.例如，您可以看一下 this，这是一个用纯 JavaScript 编写的简单快速的图像裁剪器。它使用 mousedown 来检测拖动开始，使用 mouseup 来检测拖动结束。在拖动过程中，它会监听
document.onmousemove事件。You may take a look at this for example, which is a simple and fast image cropper written with pure JavaScript. It uses mousedown to detect drag start and mouseup for drag end. During dragging, it listens
document.onmousemoveevent.