禁止从 HTML 页面拖动图像答案

【问题标题】：Disable dragging an image from an HTML page禁止从 HTML 页面拖动图像
【发布时间】：2011-05-11 20:19:04
【问题描述】：

我需要在我的页面中放置一张图片。我想禁用该图像的拖动。我正在尝试很多事情，但没有帮助。有人可以帮帮我吗？

我不想将该图像保留为背景图像，因为我正在调整图像大小。

【问题讨论】：

@AgentConundrum - 如果用户保存并做他想做的任何事情，对我来说没有问题。我唯一的要求是不要拖动该图像。

【解决方案1】：

JQuery 的优雅方式

$("body").on('mousedown','img',function(e){
    e.stopPropagation();
    e.preventDefault();
});

【讨论】：

【解决方案2】：

jQuery:

$('body').on('dragstart drop', function(e){
    e.preventDefault();
    return false;
});

您可以将 body 选择器替换为您希望防止其被拖放的任何其他容器。

【讨论】：

【解决方案3】：

答案很简单：

<body oncontextmenu="return false"/> - 禁用右键单击 <body ondragstart="return false"/> - 禁用鼠标拖动 <body ondrop="return false"/> - 禁用鼠标拖放

【讨论】：

【解决方案4】：

您可以为此使用内联代码

&lt;img draggable="false" src="http://www.ourkanpur.com/images/logo.png"&gt;

第二个选项是使用外部或页面上的 css

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

&lt;img src="http://www.ourkanpur.com/images/logo.png"&gt;

两者都正常工作 我在这个网站上使用外部 css (Click Here)

【讨论】：

这些似乎都不适用于 Firefox（使用 Mac Firefox 69）

【解决方案5】：

我做了这里显示的 css 属性以及使用以下 javascript 监控 ondragstart：

handleDragStart: function (evt) {
    if (evt.target.nodeName.match(/^(IMG|DIV|SPAN|A)$/i)) {
      evt.preventDefault();
      return false;
    }
  },

【讨论】：

【解决方案6】：

为图像设置以下 CSS 属性：

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;

【讨论】：

似乎不适用于 Firefox（使用 Mac Firefox 69）

【解决方案7】：

最简单的跨浏览器解决方案是

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

问题

img {
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-user-drag: none;
 user-drag: none;
 -webkit-touch-callout: none;
}

是不是在firefox中不工作

【讨论】：

【解决方案8】：

盗用我自己的answer，只需在图像上添加一个相同大小的完全透明元素即可。调整图像大小时，请务必调整元素大小。

这应该适用于大多数浏览器，甚至是较旧的浏览器。

【讨论】：

【解决方案9】：

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

我在我的网站http://www.namdevmatrimony.in/ 上使用了它它就像魔术一样工作！！！ :)

【讨论】：

火狐可以拖拽

【解决方案10】：

此代码完全符合您的要求。它可以防止图像被拖动，同时允许任何其他依赖于事件的操作。

$("img").mousedown(function(e){
    e.preventDefault()
});

【讨论】：

【解决方案11】：

您可能认为我的解决方案是最好的。大多数答案与 IE8 等旧浏览器不兼容，因为 e.preventDefault() 和 ondragstart 事件将不受支持。要做到跨浏览器兼容，您必须阻止此图像的 mousemove 事件。请参见下面的示例：

jQuery

$("#my_image").mousemove( function(e) { return false } ); // fix for IE
$("#my_image").attr("draggable", false); // disable dragging from attribute

没有 jQuery

var my_image = document.getElementById("my_image");
my_image.setAttribute("draggable", false);

if (my_image.addEventListener) {
   my_image.addEventListener("mousemove", function(e) { return false });
} else if (my_image.attachEvent) {
   my_image.attachEvent("onmousemove", function(e) { return false });
}

即使在 IE8 上也已经过测试和工作

【讨论】：

【解决方案12】：

在你的图片标签中直接使用：ondragstart="return false;"。

<img src="http://image-example.png" ondragstart="return false;"/>

如果你有多张图片，用<div>标签包裹：

<div ondragstart="return false;">
   <img src="image1.png"/>
   <img scr="image2.png"/>
</div>

适用于所有主流浏览器。

【讨论】：

【解决方案13】：

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

【讨论】：

【解决方案14】：

我不知道这里的答案是否对每个人都有帮助，但这里有一个简单的内联 CSS 技巧，它肯定会帮助您禁用在 HTML 页面上拖动和选择文本。

在您的<body> 标签上添加ondragstart="return false"。这将禁用图像的拖动。但如果您还想禁用文本选择，请添加onselectstart="return false"。

代码将如下所示：<body ondragstart="return false" onselectstart="return false">

【讨论】：

【解决方案15】：

document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
     e.preventDefault();
});

在这个 Plunker 中工作http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

【讨论】：

【解决方案16】：

看到这个answer;在 Chrome 和 Safari 中，您可以使用以下样式来禁用默认拖动：

-webkit-user-drag: auto | element | none;

您可以在 Firefox 和 IE(10+) 上尝试 user-select：

-moz-user-select: none | text | all | element
-ms-user-select: none | text | all | element

【讨论】：

【解决方案17】：

嗯，这是可能的，并且发布的其他答案是完全有效的，但您可以采取蛮力方法并防止 mousedown 在图像上的默认行为。其中，是开始拖动图像。

类似这样的：

window.onload = function () {  
    var images = document.getElementsByTagName('img');   
    for (var i = 0; img = images[i++];) {    
        img.ondragstart = function() { return false; };
    }  
};

【讨论】：

【解决方案18】：

你可以喜欢这个...

document.getElementById('my-image').ondragstart = function() { return false; };

See it working (or not working, rather)

看来你正在使用 jQuery。

$('img').on('dragstart', function(event) { event.preventDefault(); });

【讨论】：

@alex - 没有图像拖动的目的不是窃取图像。目的完全不同。我正在将该图像设置为可排序和可放置的。所以解释起来需要很长时间。
@alex - ondragstart 是否独立于浏览器？
@AdamMerrifield 试试$(document) 而不是$(window)
我刚刚发现你可以将 jQuery 简化为：$('img').on('dragstart', false);
@alex 处理程序下：The value false is also allowed as a shorthand for a function that simply does return false.

【解决方案19】：

只需将 draggable="false" 添加到您的图像标签：

<img draggable="false" src="image.png">

IE8 及以下不支持。

【讨论】：

我正在使用 Magento，所以我的 div 如下：
getChildHtml('media') ?>
如何我可以限制右键单击并且不能拖动我的图像 div。 @dmo

【解决方案20】：

纯 CSS 解决方案：使用 pointer-events: none

https://developer.mozilla.org/en-US/docs/CSS/pointer-events

【讨论】：

但这至少在FF中导致了奇怪的选择效果。最好还是返回false；
图片作为链接时不使用。
看起来这在 IE（任何版本）中不起作用，请参阅：caniuse.com/pointer-events
也是一个 CSS only 解决方案：在img 上放置一个元素。
-1 ！这应该用于防止所有 ponter 事件（包括拖动，例如当您要上传图像时）。最好使用javascript解决方案！

【解决方案21】：

您可以将以下内容添加到您不想被拖动的每个图像中，（在img 标签内）：

onmousedown="return false;"

例如

img src="Koala.jpg" onmousedown="return false;"

【讨论】：

【解决方案22】：

由于我的图像是使用 ajax 创建的，因此在 windows.load 上不可用。

$("#page").delegate('img', 'dragstart', function (event) { event.preventDefault(); });

这样我可以控制哪个部分阻止行为，它只使用一个事件绑定，它适用于未来的 ajax 创建的图像，而无需做任何事情。

使用 jQuery 新的on 绑定：

$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); }); （感谢@ialphan）

【讨论】：

使用.on会是这样：$(document).on('dragstart','img',function(e){e.preventDefault();});
这是正确的解决方案。一个事件绑定无限 img 元素，现在或将来。最不密集，最强大。

【解决方案23】：

很好的解决方案，有一个冲突的小问题，如果其他人与其他 js 库发生冲突，只需启用这样的冲突即可。

var $j = jQuery.noConflict();$j('img').bind('dragstart', function(event) { event.preventDefault(); });

希望这对某人有所帮助。

【讨论】：

【解决方案24】：

我自己试了一下，发现这行得通。

$("img").mousedown(function(){
    return false;
});

我确信这会禁用所有图像的拖动。不确定它会影响其他东西。

【讨论】：

啊！您应该提到您正在使用 jQuery/可以使用 jQuery。 +1 使用 jQuery。
@alex - 对不起。我自己尝试过。而且我不确定它是否会影响其他东西。
你很好！不，据我所知，做你在这里所做的应该不会对其他任何事情产生任何负面影响。
如果图像被包裹在<a> 标签内怎么办？那么如果用户点击图片，链接就不会被点击。
谢谢。顺便说一句，这也适用于带有 `event.preventDefault();` 的 GWT。

【解决方案25】：

window.ondragstart = function() { return false; }

【讨论】：

+1 不理解反对意见。这不是最终的解决方案，虽然它可以防止拖动所有，而不仅仅是一个特殊的图像。但它显示了正确的方向（我认为这是第一个这样做的答案）
@DrMolle 这可能是为了回应史蒂夫在my answer 上留下的（自删除后）cmets。
请记住，有时人们会将链接拖到他们的书签栏 - 此解决方案将删除此功能。
展示了如何做，当然，但它可以防止拖动所有内容。嗯.. 无论如何都要支持，以展示如何做。