是否有一种方法可以防止用户看到他们试图拖动的图像的幽灵(不是关心图像的安全性，而是体验)。
我已经尝试了这个，它修复了文本和图像上的蓝色选择的问题，但不是幽灵图像:
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
(我也尝试用同样的规则嵌套div内的图像)。 谢谢
当前回答
您可以在标记或JavaScript代码中将可拖动属性设置为false。
//作为jQuery方法:$('#myImage')。attr(“拖拽”,假); . getelementbyid(“模板”)。setAttribute(“拖拽”,假); <img id="myImage" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png">
或者直接使用HTML:
<img id="myImage" src="https://link-to-your.image.com/image.png" draggable="false">
注意draggable="false"也可以用在img以外的其他HTML元素上。
其他回答
这里有一个比添加空事件侦听器更简单的解决方案。 只需设置指针事件:none到你的图像。如果你仍然需要它是可点击的，在它周围添加一个容器来触发事件。
如果你真的需要使用拖动事件，并且不能设置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);
}
});
非常简单的 不要用太多逻辑把事情搞复杂了 使用简单的属性draggable并使其为false
<img draggable="false" src="img/magician.jpg" alt="" />
您可以设置拖动项目时显示的图像。Chrome测试。
设置拖动图像
使用
onclick = myFunction();
myFunction(e) {
e.dataTransfer.setDragImage(someImage, xOffset, yOffset);
}
或者，正如已经在回答中提到的，如果不能拖动元素根本不是问题，您可以在HTML元素上设置draggable="false"。
//禁用图像拖动
$(document).on("dragstart", function (e) {
e.preventDefault();
});
这需要jQuery。这可以防止拖拽任何文本或img。将文档替换为您想要阻止拖动的任何元素。
