是否有一种方法可以防止用户看到他们试图拖动的图像的幽灵(不是关心图像的安全性，而是体验)。
我已经尝试了这个，它修复了文本和图像上的蓝色选择的问题，但不是幽灵图像:
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
(我也尝试用同样的规则嵌套div内的图像)。 谢谢
当前回答
document.querySelectorAll("*").forEach((elem) => {
elem.setAttribute('draggable', false)
elem.addEventListener('dragstart', (event) => {
event.preventDefault()
})
})
这将禁用对所有元素的拖动。
其他回答
将图像作为空div的背景，或在透明元素下。当用户单击要拖动的图像时，他们是在单击一个div。
参见http://www.flickr.com/photos/thefella/5878724253/?f=hp
<div id="photo-drag-proxy"></div>
试一试:
img {
pointer-events: none;
}
尽量避免
* {
pointer-events: none;
}
处理dragstart事件并返回false。
你可以使用“空Img元素”。 空Img元素- document.createElement(" Img ")
[HTML Code]
<div id="hello" draggable="true">Drag!!!</div>
[JavaScript Code]
var block = document.querySelector('#hello');
block.addEventListener('dragstart', function(e){
var img = document.createElement("img");
e.dataTransfer.setDragImage(img, 0, 0);
})
非常简单的 不要用太多逻辑把事情搞复杂了 使用简单的属性draggable并使其为false
<img draggable="false" src="img/magician.jpg" alt="" />
