CSS / JS防止拖影的鬼影？
有没有一种方法可以防止用户看到他们试图拖动的图像的鬼魂（不关心图像的安全性，而是体验）。
我已经尝试过这个修复了文本和图像上的蓝色select而不是鬼影的问题：
img { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } （我也尝试嵌套在div中的图像应用于div相同的规则）。 谢谢
您可以在标记或JavaScript代码中将draggable属性设置为false 。 看到这个演示 。
// As a jQuery method: $('#myImage').attr('draggable', false); document.getElementById('myImage').draggable = false;
<img id="myImage" src="http://placehold.it/150x150">
我想你可以改变你的
img { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; }
变成
img { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; }
处理dragstart事件并return false 。
您可以使用CSS属性来禁用webkit浏览器中的图像。
img{-webkit-user-drag: 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); } });
这将禁止拖动所有浏览器中的图像，同时保留其他事件，如点击和hover。 只要有任何HTML5，JS或CSS可用，就可以使用。
<img draggable="false" onmousedown="return false" style="user-drag: none" />
如果您确信用户将拥有JS，那么您只需要使用JS属性等。为了获得更大的灵活性，请查看ondragstart，onselectstart以及一些WebKit tap / touch CSS。
对于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(); }
请享用。
放置图像作为空div的背景，或在透明元素下。 当用户点击图片拖动时，他们点击一个div。
见http://www.flickr.com/photos/thefella/5878724253/?f=hp
<div id="photo-drag-proxy"></div>
在Firefox上testing：删除和恢复图像的作品！ 在执行过程中也是透明的。 例如，
$('.imageContainerClass').mousedown(function() { var id = $(this).attr('id'); $('#'+id).remove(); $('#'+id).append('Image tag code'); });
编辑 ：这只适用于IE和Firefox，奇怪。 我还在每个图像上添加了draggable = false 。 Chrome和Safari仍然是一个幽灵。
编辑2 ：背景图像解决scheme是真正的最好的。 唯一的微妙之处在于，每当背景图像被改变时，都必须重新定义background-size属性！ 或者说，这就是我身边的样子。 更好的是，我有一个正常的IE浏览器下的IE标签，IE浏览器无法调整图像大小的问题。 现在，图像具有正确的尺寸。 简单：
$(id).css( 'background-image', url('blah.png') ); $(id).css( 'background-size', '40px');
另外，也许考虑这些：
background-Repeat:no-repeat; background-Position: center center;
我发现，对于IE浏览器，您必须将draggable =“false”属性添加到图像和锚点以防止拖动。 CSS选项适用于所有其他浏览器。 我在jQuery中做了这个：
$("a").attr('draggable', false); $("img").attr('draggable', false);
您可以设置拖动项目时显示的图像。 使用Chrome进行testing
setDragImage
使用
的onclick = myFunction的（）;
–
myFunction（e）{e.dataTransfer.setDragImage（someImage，xOffset，yOffset）; }
或者，正如在答案中已经提到的那样，您可以在HTML元素上设置draggable =“false”，如果不能拖动元素，则完全没有问题。
