代码之家 › 专栏 › 技术社区 › Puru

禁止从HTML页拖动图像

image css html jquery javascript

186

Puru · 技术社区 · 14 年前

我需要在我的页面上放置一个图像。我想禁止拖动那个图像。我尝试了很多事情,但没有帮助。有人能帮我吗?

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

22 回复 | 直到 6 年前

253

alex 11 年前

你可以喜欢这个…

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

See it working (or not working, rather)

似乎您正在使用jquery。

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

145

mikhuang 12 年前

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

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

114

dmo 12 年前

只需将draggable=“false”添加到图像标记:

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

但IE8及以下版本不支持。

alex 14 年前

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

Puru 14 年前

我试过了,发现这很管用。

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

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

Namdev Matrimony 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/ 它像魔术一样工作!!!!:)

imal hasaranga perera 8 年前

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

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

它在火狐中不起作用吗?

Community CDub 8 年前

看看这个 answer ;在Chrome和Safari中,可以使用以下样式禁用默认拖动:

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

你可以试试 user-select 对于firefox和ie(10+):

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

bool.dev 12 年前

您可以将以下内容添加到不想拖动的每个图像中(在 img 标签):

onmousedown="return false;"

例如

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

Mo. 9 年前

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

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

Jan 9 年前

直接使用: 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>

适用于所有主要浏览器。

guzart 12 年前

因为我的图像是使用Ajax创建的,因此在windows.load上不可用。

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

通过这种方式,我可以控制哪个部分阻止了行为,它只使用一个事件绑定,并且它可以用于将来Ajax创建的图像,而不必做任何事情。

使用jquery new on 结合:

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

Paul 13 年前

伟大的解决方案,有一个小问题与冲突, 如果其他任何人与其他JS库发生冲突,那么只需启用no conflict like so。

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

希望这能帮助别人。

Omid Farvid 8 年前

将以下CSS属性设置为图像:

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

Abhisek Das 10 年前

我不知道这里的答案是否对所有人都有帮助,但是这里有一个简单的内联CSS技巧,它绝对可以帮助你禁用在HTML页面上拖动和选择文本。

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

代码如下: <body ondragstart="return false" onselectstart="return false">

Mustafa 10 年前

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

yckart Matthew Crumley 11 年前

好吧,这是可能的,而且发布的其他答案是完全有效的,但是您可以采取一种蛮力的方法并防止 mousedown 在图像上。即开始拖动图像。

像这样:

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

jbx 10 年前

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

在这辆破车里工作 http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

CodeGems 9 年前

你可以认为我的解决方案是最好的。大多数答案与IE8等旧浏览器不兼容,因为 e.预防性违约() 也不会得到支持 Ondragstart公司 事件。要实现跨浏览器兼容,必须阻止 移动鼠标 此图像的事件。见下例:

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中也进行了测试和工作

-1

Community CDub 8 年前

偷我自己的东西 answer ,只需在图像上添加一个完全透明的相同大小的元素。调整图像大小时,请确保调整元素的大小。

这应该适用于大多数浏览器,甚至更早的浏览器。

-1

Alocus 7 年前

我使用下面的javascript对这里显示的CSS属性进行了监视,并对OnDragStart进行了监视:

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

-1

Abhishek kamal 6 年前

您可以为此使用内联代码

<img draggable="false" src="http://www.ourkanpur.com/images/logo.png">

第二个选项是使用外部或页面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;
}

<img src="http://www.ourkanpur.com/images/logo.png">

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