CSS /JS防止拖鬼图像?

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

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

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

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

当前回答

处理dragstart事件并返回false。

其他回答

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

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

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

处理dragstart事件并返回false。

试一试:

img {
  pointer-events: none;
}

尽量避免

* {
  pointer-events: none;
}

//禁用图像拖动

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

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

您可以设置拖动项目时显示的图像。Chrome测试。

设置拖动图像

使用

onclick = myFunction();
myFunction(e) {
    e.dataTransfer.setDragImage(someImage, xOffset, yOffset);
}

或者，正如已经在回答中提到的，如果不能拖动元素根本不是问题，您可以在HTML元素上设置draggable="false"。

推荐文章