CSS / JS 防止拖拽鬼图？

Question

有没有办法防止用户看到他们试图拖动的图像的重影（不关心图像的安全性，而是体验）。

我试过这个，它解决了文本和图像上的蓝色选择问题，但没有解决重影图像的问题：

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

（我还尝试将图像嵌套在 div 中，并使用相同的规则应用于 div）。谢谢

原文由 user885355 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在标记或 JavaScript 代码中将 draggable 属性设置为 false 。

 // As a jQuery method: $('#myImage').attr('draggable', false);
document.getElementById('myImage').setAttribute('draggable', false);

 <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">

请注意，除了 --- img --- 之外， draggable="false" 也可以用于其他 HTML 元素。

原文由 BoltClock 发布，翻译遵循 CC BY-SA 4.0 许可协议