是否有一种方法可以防止用户看到他们试图拖动的图像的幽灵(不是关心图像的安全性，而是体验)。
我已经尝试了这个，它修复了文本和图像上的蓝色选择的问题，但不是幽灵图像:
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
(我也尝试用同样的规则嵌套div内的图像)。 谢谢
当前回答
//禁用图像拖动
$(document).on("dragstart", function (e) {
e.preventDefault();
});
这需要jQuery。这可以防止拖拽任何文本或img。将文档替换为您想要阻止拖动的任何元素。
其他回答
这里有一个比添加空事件侦听器更简单的解决方案。 只需设置指针事件:none到你的图像。如果你仍然需要它是可点击的，在它周围添加一个容器来触发事件。
对于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();
}
享受。
如果你真的需要使用拖动事件，并且不能设置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);
}
});
你可以使用“空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);
})
在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;
