禁用从HTML页面拖动图像

Question

我需要在我的页面中放置一个图像.我想禁用拖动该图像.我正在尝试很多东西,但没有帮助.有人可以帮帮我吗？

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

Answer 1

你可以这样......

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

看它工作(或不工作,而不是)

看来你正在使用jQuery.

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

Answer 2

CSS唯一的解决方案:使用 pointer-events: none

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

Answer 3

只需将draggable ="false"添加到您的图片代码:

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

IE8及以下不支持.

Answer 4

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

Answer 5

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

<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中不起作用

Answer 6

I tried myself and found this is working.

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

I am sure this disables dragging of all the images. Not sure it effects something else.

Answer 7

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/上使用它. 它的工作就像一个魔术!:)

Answer 8

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

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

您可以尝试用户选择 Firefox和IE(10+):

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

Answer 9

您可以为此使用内联代码

<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 （单击此处）

Answer 10

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

onmousedown="return false;"

例如

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

Answer 11

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

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

Answer 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>

适用于所有主流浏览器.

Answer 13

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

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

这样我可以控制哪个部分阻止行为,它只使用一个事件绑定,它适用于将来ajax创建的图像,而不必做任何事情.

使用jQuery新on绑定:

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

Answer 14

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