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

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

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

处理dragstart事件并返回false。

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

//作为jQuery方法:$('#myImage')。attr(“拖拽”,假); . getelementbyid(“模板”)。setAttribute(“拖拽”,假); <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元素上。

如果你真的需要使用拖动事件，并且不能设置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);
        }
    });

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

享受。

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

这将在所有浏览器中禁用拖拽图像，同时保留其他事件，如单击和悬停。只要HTML5、JS或CSS可用，就可以使用。

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

如果你确信用户将拥有JS，你只需要使用JS属性，等等。要获得更大的灵活性，请查看ondragstart, onselectstart和一些WebKit点击/触摸CSS。

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

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

我想你可以改变你的

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

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

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

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

设置拖动图像

使用

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

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

这里有一个比添加空事件侦听器更简单的解决方案。 只需设置指针事件:none到你的图像。如果你仍然需要它是可点击的，在它周围添加一个容器来触发事件。

试一试:

img {
  pointer-events: none;
}

尽量避免

* {
  pointer-events: none;
}

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(“拖拽”,假)。

您还可以处理onmousedown函数以返回false。你可以用内联HTML: onmousedown="return false"，用Javascript: elm.onmousedown=()=>return false;或用jQuery: elm.mousedown(()=>return false)来做到这一点。

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

这个工作为我，我使用一些灯箱脚本

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

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

非常简单的 不要用太多逻辑把事情搞复杂了 使用简单的属性draggable并使其为false

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

当Firefox不欣赏你的draggable属性(当设置为false时)或没有你的用户拖动CSS规则在你的链接/锚或图像元素:

如果你想要保持指针事件不变，你可以使用big guns来处理MDN setDragImage中描述的“从拖动目标(dragstart事件被触发的元素)生成的半透明图像”。简单的使用方法:

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

//禁用图像拖动

$(document).on("dragstart", function (e) {
  e.preventDefault();
});

这需要jQuery。这可以防止拖拽任何文本或img。将文档替换为您想要阻止拖动的任何元素。

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

它是webkit特有的属性。以下是WebKit文档对它的描述:

Heading WebKit provides automatic support to let users drag common items, such as images, links, and selected text. You can extend this support to include specific elements on an HTML page. For example, you could mark a particular div or span tag as draggable. To mark an arbitrary element as draggable, add the -webkit-user-drag attribute to the style definition of the element. Because -webkit-user-drag is a cascading style sheet (CSS) attribute, you can include it as part of a style definition, or as an inline style attribute on the element tag. The values for this attribute are listed in Table 4-1. Values for -webkit-user-drag attribute: none: Do not allow this element to be dragged. element: Allow this element to be dragged. auto: Use the default logic for determining whether the element should be dragged. (Images, links, and text selections are the only elements that can be dragged.) This is the default value.

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

document.querySelectorAll("*").forEach((elem) => {
    elem.setAttribute('draggable', false)
    elem.addEventListener('dragstart', (event) => {
        event.preventDefault()
    })
})

这将禁用对所有元素的拖动。