Javascript CSS / JS 来防止拖拽鬼影？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7439042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS /JS to prevent dragging of ghost image?
提问by user885355
Is there a way to prevent the user from seeing a ghost of the image they are trying to drag (not concern about security of the images, but the experience).
有没有办法防止用户看到他们试图拖动的图像的幻影（不关心图像的安全性，但关心的是体验）。
I've tried this which fixes the problem with the blue selection on text and images but not the ghost image:
我试过这个解决了文本和图像上的蓝色选择的问题，但不是鬼图像：
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
(I also tried nesting the image inside a div with the same rules applied to the div). Thanks
（我还尝试将图像嵌套在 div 中，并将相同的规则应用于 div）。谢谢
回答by BoltClock
You can set the draggableattribute to falsein either the markup or JavaScript code.
您可以在标记或 JavaScript 代码中将该draggable属性设置为false。
// As a jQuery method: $('#myImage').attr('draggable', false);
document.getElementById('myImage').setAttribute('draggable', false);<img id="myImage" src="http://placehold.it/150x150">回答by Max
I think you can change your
我想你可以改变你的
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
into a
成
img {
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
回答by Erik Rybalkin
Try it:
尝试一下：
img {
pointer-events: none;
}
and try to avoid
并尽量避免
* {
pointer-events: none;
}
回答by Ashwani
You can use a CSS property to disable images in webkit browsers.
您可以使用 CSS 属性在 webkit 浏览器中禁用图像。
img{-webkit-user-drag: none;}
回答by Beejor
This will disable dragging for an image in all browsers, while preserving other events such as click and hover. Works as long as any of HTML5, JS, or CSS are available.
这将禁止在所有浏览器中拖动图像，同时保留其他事件，例如单击和悬停。只要 HTML5、JS 或 CSS 中的任何一个可用，就可以工作。
<img draggable="false" onmousedown="return false" style="user-drag: none" />
<img draggable="false" onmousedown="return false" style="user-drag: none" />
If you're confident the user will have JS, you only need to use the JS attribute, etc. For more flexibility, look into ondragstart, onselectstart, and some WebKit tap/touch CSS.
如果您确信用户将拥有 JS，则只需使用 JS 属性等。为了获得更大的灵活性，请查看 ondragstart、onselectstart 和一些 WebKit tap/touch CSS。
回答by SLaks
Handle the dragstartevent and return false.
处理dragstart事件和return false。
回答by louisinhongkong
You can assign an alternate ghost image if you really need to use drag events and can't set draggable=false. So just assign a blank png like so:
如果您确实需要使用拖动事件并且无法设置 draggable=false，则可以指定备用重影图像。所以只需像这样分配一个空白的png：
$('#img').bind({
dragstart: function(e) {
var dragIcon = document.createElement('img');
dragIcon.src = 'blank.png';
dragIcon.width = 100;
e.dataTransfer.setDragImage(dragIcon, -10, -10);
}
});
回答by Michael Jasper
Place the image as a background of an empty div, or under a transparent element. When the user clicks on the image to drag, they are clicking on a div.
将图像放置为空 div 的背景，或放置在透明元素下。当用户单击要拖动的图像时，他们正在单击一个 div。
See http://www.flickr.com/photos/thefella/5878724253/?f=hp
见http://www.flickr.com/photos/thefella/5878724253/?f=hp
<div id="photo-drag-proxy"></div>
回答by dijipiji
For Firefox you need to go a little deeper with this:
对于 Firefox，您需要更深入地了解以下内容：
var imgs = document.getElementsByTagName('img');
// loop through fetched images
for (i = 0; i < imgs.length; i++) {
// and define onmousedown event handler
imgs[i].onmousedown = disableDragging;
}
function disableDragging(e) {
e.preventDefault();
}
Enjoy.
享受。
回答by Micros
There is a much easier solution here than adding empty event listeners.
Just set pointer-events: noneto your image. If you still need it to be clickable, add a container around it which triggers the event.
这里有一个比添加空事件侦听器更简单的解决方案。只需设置pointer-events: none为您的图像。如果您仍然需要它是可点击的，请在它周围添加一个容器来触发事件。
