CSS / JS 防止拖拽鬼图？

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

// 作为一个 jQuery 方法： $('#myImage').attr('draggable', false); document.getElementById('myImage').setAttribute('draggable', false);

---

我认为你可以改变你的

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

---

试试看：

img {
  pointer-events: none;
}

并尽量避免

* {
  pointer-events: none;
}

---

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

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

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

---

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

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

---

非常简单不要用很多逻辑让它变得复杂使用简单的属性可拖动并使其为假

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

---

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) 来执行此操作

---

处理 dragstart 事件和 return false。

---

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

---

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

---

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

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

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

---

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

享受。

---

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

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

---

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

---

当 Firefox 不喜欢您的可拖动属性（当设置为 false 时）或您的链接/锚点或图像元素中没有任何用户拖动 CSS 规则时：

https://i.stack.imgur.com/etqBY.png

并且您想保持 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());
}

---

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

---

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

setDragImage

利用

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

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

---

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

---

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

.nodragglement { 变换：翻译（0px，0px）！重要； }

---