CSS /JS 防止拖拽鬼影图像？

javascript html css

2022-08-30 01:11:46

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

我已经尝试过这个，它解决了文本和图像上的蓝色选择的问题，而不是鬼影图像的问题：

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

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

答案 1

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

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

<img id="myImage" src="http://placehold.it/150x150">

答案 2

我认为你可以改变你的

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

进入一个

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