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

您可以在标记或JavaScript代码中将draggable属性设置为false.看这个演示.

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

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

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

Answer 3

试试吧:

img{pointer-events: none;}

并尽量避免

*{pointer-events: none;}

Answer 4

您可以使用CSS属性在webkit浏览器中禁用图像.

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

Answer 5

这将禁用在所有浏览器中拖动图像,同时保留其他事件,例如单击和悬停.只要HTML5,JS或CSS中的任何一个可用,就可以正常工作.

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

如果你确信用户将拥有JS,你只需要使用JS属性等.为了更加灵活,请查看ondragstart,onselectstart和一些WebKit点击/触摸CSS.

Answer 6

处理dragstart事件和return false.

Answer 7

很简单，不要用很多逻辑让它变得复杂使用简单的属性draggable并使它成为false

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

Answer 8

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

Answer 9

be-all-end-all，无需选择或拖动，带有所有浏览器前缀：

-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函数处理为return false. 您可以使用内联 HTML: onmousedown="return false"、Javascript:elm.onmousedown=()=>return false;或 jQuery 执行此操作：elm.mousedown(()=>return false)

Answer 10

以下是防止拖拽重影的三种不同方法：

超文本标记语言

<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 可拖动属性/属性是首选解决方案。

它是 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 的移动浏览器的支持可能会因移动操作系统而异。

Answer 11

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

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

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