CSS / JS 防止拖拽鬼图？
Posted
技术标签:
【中文标题】CSS / JS 防止拖拽鬼图？【英文标题】：CSS /JS to prevent dragging of ghost image? 【发布时间】：2011-11-18 08:05:22 【问题描述】：有没有办法防止用户看到他们试图拖动的图像的幻影（不是关心图像的安全性，而是体验）。
我已经尝试过解决了文本和图像上的蓝色选择问题，但没有解决重影图像的问题：
img
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
（我还尝试将图像嵌套在 div 中，并使用相同的规则应用于 div）。 谢谢
【问题讨论】：
查看此答案：***.com/a/4211930/1060487 问题可能重复 【参考方案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">【讨论】：
为什么要用 JavaScript 添加它？？？<img id="myImage" src="http://placehold.it/150x150" draggable="false">
@Greg：你为什么问我？想要 JavaScript 解决方案的是 OP。另外，无论如何，我确实说过“在标记或 JavaScript 代码中”，所以如果您可以选择编辑标记，您就无法在标记中执行此操作。
在 FF 中不能与 -moz-user-select: none 结合使用。可能的解决方案：添加pointer-events: none。
也许我误解了这个问题，但 OP 不是在问他们如何保留拖放而只是隐藏重影图像？将draggable 设置为false 将完全禁用拖放。
@James：说实话，这个问题还不是很清楚。我主要是在假设重影是拖放的视觉指示器（确实如此）的假设下回答的，并且大多数想要隐藏重影的人通常不关心拖放是否是完全禁用。【参考方案2】：
当 Firefox 不支持您的 draggable 属性（当设置为 false 时）或您的链接中没有任何 user-drag CSS 规则时/锚或图像元素：
如果你想保持 pointer-events 原样，你可以使用大枪来处理从拖动目标（元素触发 dragstart 事件）”，如MDN setDragImage 中所述。只需使用：
if (/(firefox)/i.test(navigator.userAgent))
document.querySelector('.my-non-draggable').addEventListener('dragstart',
e => e.preventDefault()
);
// or jQuery: $('.my-non-draggable').on('dragstart', e => e.preventDefault());
【讨论】：
【参考方案3】：非常简单 不要用很多逻辑让它变得复杂 使用简单属性 draggable 并使其 false
<img draggable="false" src="img/magician.jpg" />
【讨论】：
【参考方案4】：您可以使用“空图像元素”。 空 Img 元素 - document.createElement("img")
[HTML Code]
<div id="hello" draggable="true">Drag!!!</div>
[JavaScript Code]
var block = document.querySelector('#hello');
block.addEventListener('dragstart', function(e)
var img = document.createElement("img");
e.dataTransfer.setDragImage(img, 0, 0);
)
【讨论】：
【参考方案5】：这对我有用，我使用一些灯箱脚本
.nodragglement
transform: translate(0px, 0px)!important;
【讨论】：
【参考方案6】：<img src="myimage.jpg" ondragstart="return false;" />
【讨论】：
这是最好的解决方案。【参考方案7】：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)
【讨论】：
【参考方案8】：我认为你可以改变你的
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;
【讨论】：
@victorsosa 是的，但事实上的标准仍然是标准，不管 W3C 与否。也就是说，如果每个浏览器都支持它，那很好。请记住，很多 W3C 的东西一开始都是专有的，比如 AJAX。 此解决方案不适用于 IE11 和 Firefox 57.0。【参考方案9】：试试看：
img
pointer-events: none;
尽量避免
*
pointer-events: none;
【讨论】：
这是一个糟糕的解决方案，因为它消除了与元素交互的所有能力。 OP 只是要求禁用元素的“拖动”功能，而不是完全禁用与元素的任何和所有基于指针的交互。 @Chad 确实如此，但可以包装图像并将事件侦听器添加到包装器中，而图像不再具有重影图像。【参考方案10】：您可以设置拖动项目时显示的图像。用 Chrome 测试。
setDragImage
使用
onclick = myFunction();
myFunction(e)
e.dataTransfer.setDragImage(someImage, xOffset, yOffset);
或者，正如答案中已经提到的，您可以在 HTML 元素上设置 draggable="false"，如果根本无法拖动元素是没有问题的。
【讨论】：
【参考方案11】：这里有一个比添加空事件侦听器更简单的解决方案。
只需将pointer-events: none设置为您的图像。如果您仍然需要它是可点击的，请在其周围添加一个触发事件的容器。
【讨论】：
【参考方案12】：这将禁止在所有浏览器中拖动图像，同时保留其他事件，例如点击和悬停。只要 HTML5、JS 或 CSS 中的任何一个可用，就可以工作。
<img draggable="false" onmousedown="return false" style="user-drag: none" />
如果您确信用户将拥有 JS，则只需使用 JS 属性等。为了获得更大的灵活性，请查看 ondragstart、onselectstart 和一些 WebKit tap/touch CSS。
【讨论】：
您可能想改为 (this.onclick || this.click)() .. 如果根据这个逻辑可以取消定义 onclick？ @Kaizoku 谢谢，我没有考虑过！根据您的建议更新了我的答案。 这似乎在 FireFox 中不起作用，因为严格来说，onmousedown="return false" 就足够了。还需要避免用户在拖动图像时选择图像，这将允许他们拖动选择。【参考方案13】：
我发现对于IE来说，你必须在图片和锚点上添加draggable="false"属性来防止拖拽。 CSS 选项适用于所有其他浏览器。我在 jQuery 中做到了这一点：
$("a").attr('draggable', false);
$("img").attr('draggable', false);
【讨论】：
【参考方案14】：您可以使用 CSS 属性来禁用 webkit 浏览器中的图像。
img-webkit-user-drag: none;
【讨论】：
这也适用于-ms-user-drag、-moz-user-drag 和user-drag。一个很棒的纯 CSS 解决方案！【参考方案15】：
在 Firefox 上测试：删除和放回图像工作！它在执行时也是透明的。例如，
$('.imageContainerClass').mousedown(function()
var id = $(this).attr('id');
$('#'+id).remove();
$('#'+id).append('Image tag code');
);
编辑：奇怪的是，这只适用于 IE 和 Firefox。我还在每张图片上添加了draggable = false。 Chrome 和 Safari 仍然是个幽灵。
编辑 2：背景图像解决方案确实是最好的解决方案。唯一的微妙之处是每次更改背景图像时都必须重新定义background-size 属性！或者说，这就是我身边的样子。更好的是，我在 IE 下遇到了正常的img 标签问题，IE 无法调整图像大小。现在，图像具有正确的尺寸。简单：
$(id).css( 'background-image', url('blah.png') );
$(id).css( 'background-size', '40px');
另外，也许考虑一下：
background-Repeat:no-repeat;
background-Position: center center;
【讨论】：
【参考方案16】：对于 Firefox，您需要更深入地了解这一点：
var imgs = document.getElementsByTagName('img');
// loop through fetched images
for (i = 0; i < imgs.length; i++)
// and define onmousedown event handler
imgs[i].onmousedown = disableDragging;
function disableDragging(e)
e.preventDefault();
享受吧。
【讨论】：
这是真正有用的。谢谢！【参考方案17】：如果您确实需要使用拖动事件并且无法设置 draggable=false，则可以指定备用重影图像。因此，只需像这样分配一个空白 png：
$('#img').bind(
dragstart: function(e)
var dragIcon = document.createElement('img');
dragIcon.src = 'blank.png';
dragIcon.width = 100;
e.dataTransfer.setDragImage(dragIcon, -10, -10);
);
【讨论】：
并非所有浏览器都支持setDragImage，即使它们支持拖放，例如IE10/11.
是否可以在不实际使用空白 png 的情况下使用此技巧？
您可以使用内联定义的 base64 编码图像...例如dragIcon.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';【参考方案18】：
处理dragstart 事件和return false。
【讨论】：
【参考方案19】：将图像作为空 div 的背景或透明元素下方。当用户单击要拖动的图像时，他们正在单击一个 div。
见http://www.flickr.com/photos/thefella/5878724253/?f=hp
<div id="photo-drag-proxy"></div>
【讨论】：
以上是关于CSS / JS 防止拖拽鬼图？的主要内容，如果未能解决你的问题，请参考以下文章
当我在页面上有多个 Like 按钮时，是不是可以防止多次加载同一个 JS/CSS 文件？
如何使用 CSS 或 JS 防止 iOS 键盘将视图推离屏幕