javascript - 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)。 谢谢

Answer 1

您可以设置 draggable在标记或 JavaScript 代码中将属性设置为 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">

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