如何使用CSS/JS防止拖动幽灵图像？

Question

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

我已经尝试了以下方法，解决了文本和图像的蓝色选中问题，但没有解决幽灵图像的问题：

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

我还尝试过将图像嵌套在一个带有相同规则的 div 中。

- user885355

---

请参考此答案：https://dev59.com/rG855IYBdhLWcg3wq2TL#4211930 该问题可能是重复的。 - mattdlockyer

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

请注意，draggable="false" 这个属性不仅可以应用于 img 元素，还可以应用于其他 HTML 元素。

- BoltClock

---

为什么要用JavaScript添加它？<img id="myImage" src="http://placehold.it/150x150" draggable="false"> - Greg

@Greg：你问我做什么？是原帖作者需要JavaScript解决方案。而且我已经说过“在标记或JavaScript代码中都可以”，所以如果你有编辑标记的选项，你也可以在标记中完成它，不一定非得使用JavaScript。 - BoltClock

与-moz-user-select: none组合在一起在FF上不起作用。可能的解决方案：添加pointer-events: none。 - Cedric Reichenbach

也许我误解了问题，但是原帖的提问者不是在询问如何保留拖放功能而只隐藏虚影图像吗？将 draggable 设置为 false 将完全禁用拖放功能。 - James

@James：说实话，从问题中并不是很清楚。我主要是在假设幽灵图像是拖放的视觉指示器（它确实是），而且大多数想要隐藏幽灵图像的人通常并不关心是否完全禁用拖放。 - BoltClock

Answer 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;
}

- Max

---

这个解决方案在IE11和Firefox 57.0中无法使用。 - Tudor Ciotlos

给下一个想要找出区别的困倦的人：-select 变成了 -drag。 - undefined

Answer 3

试一试：

img {
  pointer-events: none;
}

尝试避免

* {
  pointer-events: none;
}

- Erik Rybalkin

---

这个解决方案很差，因为它会使与该元素的交互能力全部消失。OP只是想要禁用元素的“拖动”功能，而不是完全禁用元素的任何指针交互功能。 - Chad

@Chad，这是正确的，但是可以将图像包装起来，并在没有幻影图像的情况下向包装器添加事件侦听器。 - Vincent Hoch-Drei

Answer 4

这将禁用在所有浏览器中拖动图像的功能，同时保留其他事件，如单击和悬停。只要HTML5、JS或CSS中的任何一个可用即可正常使用。

<img draggable="false" onmousedown="return false" style="user-drag: none" />

如果您确信用户将具有JS，则只需要使用JS属性等。为了获得更大的灵活性，请查看ondragstart、onselectstart和一些WebKit tap/touch CSS。

- Beejor

---

这在FireFox中似乎不起作用，因为严格来说，<img>甚至没有onclick或click事件。无论如何，我只是使用了onmouseup部分，并让父DIV处理onclick事件，它可以工作。 - Nelson

@Nelson 谢谢你让我知道。似乎 onmouseup 也不需要，因为 onclick 会触发任何 onmousedown/up 处理程序的返回值。我决定简化我的答案。新的一行代码应该可以正常工作；在 FF、Safari、Chrome、IE8/10 中测试过了。 - Beejor

我使用Firefox 62，onmousedown="return false"就足够了。同时还需要避免用户在拖动图像时选择它，否则他们将可以拖动所选内容。 - loxaxs

CSS的user-drag: none在我的Chrome和Firefox浏览器上都不起作用。两个浏览器的控制台都显示“无效的属性名称”。在元素本身上添加draggable="false"就可以正常工作。 - undefined

Answer 5

你可以使用CSS属性来禁用Webkit浏览器中的图片。

img{-webkit-user-drag: none;}

- Ashwani

---

这也适用于“-ms-user-drag”、“-moz-user-drag”和“user-drag”。这是一个很棒的仅使用CSS的解决方案！ - Beejor

Answer 6

非常简单 不要用太多逻辑使其复杂化 使用简单属性 draggable 并将其设为 false

<img draggable="false" src="img/magician.jpg" alt="" />

- MD SHAYON

---

这似乎只存在于最新的浏览器中，例如https://caniuse.com/?search=draggable表示该功能在Chrome 113中到达，而 https://chromereleases.googleblog.com/2023/05/stable-channel-update-for-desktop.html 表示Chrome 113于2023年5月2日发布。您在2020年末写下了您的评论，那时稳定版本中是否存在此功能？ - Neek

Answer 7

这是所有浏览器前缀都支持的、无需选择或拖动的终极解决方案：

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;

-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
-ms-user-drag: none;
user-drag: none;

您还可以将draggable属性设置为false。您可以通过内联HTML：draggable="false"，使用Javascript：elm.draggable = false，或使用jQuery：elm.attr('draggable', false)来实现此操作。

您也可以处理onmousedown函数以返回false。 您可以通过内联HTML：onmousedown="return false"，使用Javascript：elm.onmousedown=()=>return false;，或使用jQuery：elm.mousedown(()=>return false)来实现此操作。

- Justin

Answer 8

<img src="myimage.jpg" ondragstart="return false;" />

- lubosdz

---

适用于Firefox。 - dsturbid

Answer 9

处理 dragstart 事件并 return false。

- SLaks

Answer 10

HTML

<img draggable="false" src="img/example.jpg">

---

JavaScript

document.querySelector('img').addEventListener('dragstart', (event) => {
  event.preventDefault();
});

---

CSS

img {
  -webkit-user-drag: none;
}

目前在浏览器中或标准轨道上没有没有未加前缀的user-drag属性或其他版本的实现，因为HTML的draggable属性/属性是首选解决方案。

这是一个Webkit特定的属性。以下是WebKit文档对此的说明:

标题

WebKit提供自动支持，可以让用户拖动常见的项目，例如图像、链接和选定的文本。您可以扩展此支持以包括HTML页面上的特定元素。例如，您可以将特定的div或span标记为可拖动。

要将任意元素标记为可拖动，请将-webkit-user-drag属性添加到元素的样式定义中。因为-webkit-user-drag是一种级联样式表（CSS）属性，所以您可以将其作为样式定义的一部分或作为元素标记上的内联样式属性包含在其中。此属性的值列在表4-1中。

-webkit-user-drag属性的值:

• none: 不允许拖动此元素。

• element: 允许拖动此元素。

• auto: 使用默认逻辑确定是否应拖动元素。(图像、链接和文本选择是唯一可拖动的元素。)这是默认值。

所有使用WebKit渲染引擎的浏览器都支持它，因此包括Chrome、较新版本的Opera、Safari等浏览器。使用WebKit的移动浏览器的支持可能会因移动操作系统而异。

- Emin Temiz

---

像这个简单的CSS解决方案一样，效果很好。 - Sergey Khmelevskoy