CSS / JS 防止拖拽鬼影？答案

【问题标题】：CSS /JS to prevent dragging of ghost image?CSS / JS 防止拖拽鬼影？
【发布时间】：2022-01-05 11:51:51
【问题描述】：

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

我已经尝试过解决了文本和图像上的蓝色选择问题，但没有解决重影图像的问题：

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

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

【问题讨论】：

查看此答案：stackoverflow.com/a/4211930/1060487 问题可能重复

标签： javascript html css

【解决方案1】：

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

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

&lt;img id="myImage" src="http://placehold.it/150x150"&gt;

【讨论】：

为什么要用 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】：

我认为你可以改变你的

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。

【解决方案3】：

试试看：

img {
  pointer-events: none;
}

尽量避免

* {
  pointer-events: none;
}

【讨论】：

这是一个糟糕的解决方案，因为它消除了与元素交互的所有能力。 OP 只是要求禁用元素的“拖动”功能，而不是完全禁用与元素的任何和所有基于指针的交互。
@Chad 确实如此，但可以包装图像并将事件侦听器添加到包装器中，而图像不再具有重影图像。

【解决方案4】：

这将禁止在所有浏览器中拖动图像，同时保留其他事件，例如点击和悬停。只要 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 中不起作用，因为严格来说，甚至没有 onclick 或 click 事件。无论如何，我只是使用了 onmouseup 部分并让父 DIV 处理 onclick 并且它可以工作。
@Nelson 感谢您告诉我。似乎无论如何都不需要 onmouseup，因为无论任何 onmousedown/up 处理程序的返回值如何，都会触发 onclick。为了简单起见，我决定修改我的答案。新的单线应该可以正常工作；刚刚在 FF、Safari、Chrome、IE8/10 中测试过。
我在 Firefox 62 上，onmousedown="return false" 就足够了。还需要避免用户在拖动图像时选择图像，这将允许他们拖动选择。

【解决方案5】：

您可以使用 CSS 属性来禁用 webkit 浏览器中的图像。

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

【讨论】：

这也适用于-ms-user-drag、-moz-user-drag 和user-drag。一个很棒的纯 CSS 解决方案！

【解决方案6】：

非常简单不要用很多逻辑让它变得复杂使用简单属性 draggable 并使其 false

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

【讨论】：

【解决方案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 src="myimage.jpg" ondragstart="return false;" />

【讨论】：

这是最好的解决方案。

【解决方案9】：

处理dragstart 事件和return false。

【讨论】：

【解决方案10】：

如果您确实需要使用拖动事件并且无法设置 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';

【解决方案11】：

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

见http://www.flickr.com/photos/thefella/5878724253/?f=hp

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

【讨论】：

【解决方案12】：

对于 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();
    }

享受吧。

【讨论】：

这是真正有用的。谢谢！

【解决方案13】：

我发现对于IE来说，你必须在图片和锚点上添加draggable="false"属性来防止拖拽。 CSS 选项适用于所有其他浏览器。我在 jQuery 中做到了这一点：

$("a").attr('draggable', false); 
$("img").attr('draggable', false);

【讨论】：

【解决方案14】：

这里有一个比添加空事件侦听器更简单的解决方案。只需将pointer-events: none设置为您的图像。如果您仍然需要它是可点击的，请在其周围添加一个触发事件的容器。

【讨论】：

【解决方案15】：

当 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());
}

【讨论】：

【解决方案16】：

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

【讨论】：

【解决方案17】：

您可以设置拖动项目时显示的图像。用 Chrome 测试。

setDragImage

使用

onclick = myFunction();
myFunction(e) {
    e.dataTransfer.setDragImage(someImage, xOffset, yOffset);
}

或者，正如答案中已经提到的，您可以在 HTML 元素上设置 draggable="false"，如果根本无法拖动元素是没有问题的。

【讨论】：

【解决方案18】：

您可以使用“空图像元素”。
空 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);
})

【讨论】：

【解决方案19】：

这对我有用，我使用一些灯箱脚本

.nodragglement {
    transform: translate(0px, 0px)!important;
}

【讨论】：