CSS /JS防止拖鬼图像?

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

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

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

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

当前回答

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

.nodragglement { 转换：翻译（0px， 0px）！重要; }

其他回答

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

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

//禁用图像拖动

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

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

试一试:

img {
  pointer-events: none;
}

尽量避免

* {
  pointer-events: none;
}

这里有一个比添加空事件侦听器更简单的解决方案。只需设置指针事件:none到你的图像。如果你仍然需要它是可点击的，在它周围添加一个容器来触发事件。

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

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

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

推荐文章