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

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

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

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


当前回答

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

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

其他回答

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

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

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

试一试:

img {
  pointer-events: none;
}

尽量避免

* {
  pointer-events: none;
}

处理dragstart事件并返回false。

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

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

当Firefox不欣赏你的draggable属性(当设置为false时)或没有你的用户拖动CSS规则在你的链接/锚或图像元素:

如果你想要保持指针事件不变,你可以使用big guns来处理MDN setDragImage中描述的“从拖动目标(dragstart事件被触发的元素)生成的半透明图像”。简单的使用方法:

if (/(firefox)/i.test(navigator.userAgent)) {
  document.querySelector('.my-non-draggable').addEventListener('dragstart',
    e => e.preventDefault()
  );
  // or jQuery: $('.my-non-draggable').on('dragstart', e => e.preventDefault());
}