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

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

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

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


当前回答

be-all-end-all,用于不选择或拖动,所有浏览器前缀:

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;

-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
-ms-user-drag: none;
user-drag: none;

您还可以将draggable属性设置为false。你可以用内联HTML: draggable="false", Javascript: elm来实现。draggable = false,或者用jQuery: elm。attr(“拖拽”,假)。

您还可以处理onmousedown函数以返回false。你可以用内联HTML: onmousedown="return false",用Javascript: elm.onmousedown=()=>return false;或用jQuery: elm.mousedown(()=>return false)来做到这一点。

其他回答

//禁用图像拖动

$(document).on("dragstart", function (e) {
  e.preventDefault();
});

这需要jQuery。这可以防止拖拽任何文本或img。将文档替换为您想要阻止拖动的任何元素。

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

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

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

这将在所有浏览器中禁用拖拽图像,同时保留其他事件,如单击和悬停。只要HTML5、JS或CSS可用,就可以使用。

<img draggable="false" onmousedown="return false" style="user-drag: none" />

如果你确信用户将拥有JS,你只需要使用JS属性,等等。要获得更大的灵活性,请查看ondragstart, onselectstart和一些WebKit点击/触摸CSS。

你可以使用“空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。