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

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

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

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


当前回答

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

其他回答

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

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

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

这个工作为我,我使用一些灯箱脚本

.nodragglement { 转换: 翻译(0px, 0px)!重要; }

你可以使用“空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);
})

处理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元素上。