是否有一种方法可以防止用户看到他们试图拖动的图像的幽灵(不是关心图像的安全性，而是体验)。
我已经尝试了这个，它修复了文本和图像上的蓝色选择的问题，但不是幽灵图像:
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
(我也尝试用同样的规则嵌套div内的图像)。 谢谢
当前回答
这个工作为我，我使用一些灯箱脚本
.nodragglement { 转换： 翻译（0px， 0px）！重要; }
其他回答
在Firefox上测试:删除和放回图像工作!而且在执行过程中也是透明的。例如,
$('.imageContainerClass').mousedown(function() {
var id = $(this).attr('id');
$('#'+id).remove();
$('#'+id).append('Image tag code');
});
编辑:奇怪的是，这只适用于IE和Firefox。我还在每张图片上添加了draggable = false。Chrome和Safari浏览器仍然是个幽灵。
编辑2:背景图像的解决方案确实是最好的。唯一的微妙之处在于，每当背景图像被改变时，background-size属性都必须重新定义!从我的角度看是这样的。更好的是，我在IE下的普通img标签有一个问题，IE无法调整图像的大小。现在，图像有了正确的尺寸。简单:
$(id).css( 'background-image', url('blah.png') );
$(id).css( 'background-size', '40px');
此外，或许可以考虑以下因素:
background-Repeat:no-repeat;
background-Position: center center;
这个工作为我，我使用一些灯箱脚本
.nodragglement { 转换： 翻译（0px， 0px）！重要; }
您可以在标记或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元素上。
我发现，对于IE，你必须添加draggable="false"属性的图像和锚，以防止拖动。CSS选项适用于所有其他浏览器。我用jQuery做了这个:
$("a").attr('draggable', false);
$("img").attr('draggable', false);
当Firefox不欣赏你的draggable属性(当设置为false时)或没有你的用户拖动CSS规则在你的链接/锚或图像元素:
如果你想要保持指针事件不变，你可以使用big guns来处理MDN setDragImage中描述的“从拖动目标(dragstart事件被触发的元素)生成的半透明图像”。简单的使用方法:
if (/(firefox)/i.test(navigator.userAgent)) {
document.querySelector('.my-non-draggable').addEventListener('dragstart',
e => e.preventDefault()
);
// or jQuery: $('.my-non-draggable').on('dragstart', e => e.preventDefault());
}
