是否有一种方法可以防止用户看到他们试图拖动的图像的幽灵(不是关心图像的安全性,而是体验)。

我已经尝试了这个,它修复了文本和图像上的蓝色选择的问题,但不是幽灵图像:

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

(我也尝试用同样的规则嵌套div内的图像)。 谢谢


当前回答

我发现,对于IE,你必须添加draggable="false"属性的图像和锚,以防止拖动。CSS选项适用于所有其他浏览器。我用jQuery做了这个:

$("a").attr('draggable', false); 
$("img").attr('draggable', false);

其他回答

<img src="myimage.jpg" ondragstart="return false;" />

将图像作为空div的背景,或在透明元素下。当用户单击要拖动的图像时,他们是在单击一个div。

参见http://www.flickr.com/photos/thefella/5878724253/?f=hp

<div id="photo-drag-proxy"></div>

处理dragstart事件并返回false。

您可以在标记或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元素上。

你可以使用CSS属性禁用webkit浏览器中的图像。

img{-webkit-user-drag: none;}