禁用从HTML页面拖动图像

194

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

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

— 用户1034
source

15

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

— 用户1034

261

你可以这样...

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

看到它正常工作（或者不正常工作）

看来您正在使用jQuery。

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

— 亚历克斯
source

9

@alex-不拖动图像的目的不是偷图像。目的是完全不同的。我正在使该图像可排序和可拖放。因此，解释它需要很长时间。

— 用户1034

2

@alex-ondragstart是否与浏览器无关？

— 用户1034

1

@AdamMerrifield尝试$(document)代替$(window)

— rybo111 '16

2

我刚刚计算出可以将jQuery简化为：$('img').on('dragstart', false);

— rybo111 '16

2

@alex管理员：The value false is also allowed as a shorthand for a function that simply does return false.

— Adam Merrifield，

174

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

https://developer.mozilla.org/zh-CN/docs/CSS/pointer-events

— 米庄
source

3

但这导致FF至少有奇怪的选择效果。最好还是返回false；

— Bhumi Singhal

当图像作为链接时不使用。

— Nilesh patel，

3

看起来这在IE（任何版本）中均不起作用，请参见：caniuse.com/pointer-events

— Justin Tanner

8

另外一个CSS唯一的解决方案：将一个元素上的img。

— alex

6

-1！这应该用于防止所有ponter事件（包括拖动，例如要上传图像时）。使用JavaScript解决方案istead！

— Denys Vitali 2014年

129

只需将draggable =“ false”添加到您的图片标签即可：

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

IE8及以下版本不支持。

— dmo
source

我正在使用Magento，所以我的div如下：<div class =“ product-img-box”> <？php echo $ this-> getChildHtml（'media'）？> </ div>如何限制右键单击并且不拖拽我的形象师 @dmo

— Gem，

41

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

— 本
source

4

+1不了解反对票。这不是最终的解决方案，尽管它可以阻止全部拖动，而不仅可以拖动特殊图像。但这显示了正确的方向（我认为这是做到这一点的第一个答案）

— Dr.Molle

@DrMolle可能是由于Steve在我的回答中留下的评论（已删除）。

— Alex

2

请记住，有时人们会将链接拖动到其书签栏-此解决方案将删除此功能。

— jClark 2012年

33

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

<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中工作

— 动物哈萨兰加佩雷拉
source

25

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/上使用了它，就像魔术一样！！！:)

— 南德夫婚姻
source

6

它在Firefox中是可拖动的

— Dean Christian Armada教务长

24

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

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

我确定这会禁用所有图像的拖动。不确定会影响其他因素。

— 用户1034
source

3

啊! 您应该提到您正在使用jQuery /可以使用jQuery。+1用于使用jQuery。

— Alex

@alex-对不起。我正在尝试自己。而且我不确定它是否会影响其他事情。

— 用户1034

你很好！不，据我所知，做这里的事情不会对其他任何事情产生负面影响。

— 亚历克斯（Alex）

2

如果图像包装在<a>标签内怎么办？然后，如果用户单击图像，则不会单击该链接。

— SeinopSys

谢谢。顺便说一句，这在带有`event.preventDefault（）;`的GWT中也有效。

— 约翰娜2014年

14

看到这个答案 ; 在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

— hu
source

11

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

onmousedown="return false;"

例如

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

— 波波
source

10

这段代码正是您想要的。它可以防止图像拖动，同时允许进行任何其他取决于事件的操作。

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

— 罗伯特
source

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>

在所有主流浏览器中均可使用。

— 一月
source

8

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

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

这样，我可以控制哪个部分阻止了该行为，它仅使用一个事件绑定，并且可以用于将来由ajax创建的图像，而无需执行任何操作。

使用jQuery的新on绑定：

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

— 古扎特
source

1

使用.on就像这样：$（document）.on（'dragstart'，'img'，function（e）{e.preventDefault（）;}）;

— ialphan

这是正确的解决方案。一个事件绑定了无限数量的img元素，无论现在还是将来。最省力，最可靠。

— bearfriend 2013年

5

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

— 穆斯塔法
source

4

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

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

希望这可以帮助某人。

— 保罗
source

3

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

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

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

— 阿披实达斯
source

3

您可能会认为我的解决方案是最好的。大多数答案与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

— 代码宝石
source

3

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

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

— 奥米德·法维德（Omid Farvid）
source

1

在Firefox（使用Mac Firefox 69）上似乎不起作用

— Ben Wheeler

2

好吧，这是有可能的，发布的其他答案也很有效，但是您可以采取蛮力手段并防止mousedown图像上的默认行为。其中，就是开始拖动图像。

像这样：

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

— 亚历克斯
source

2

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

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

— 托普
source

2

jQuery的：

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

您可以将主体选择器替换为要防止子代拖放的其他任何容器。

— s
source

1

您可以为此使用内联代码

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

展开摘要

第二个选项是使用外部CSS或页面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 （单击此处）

— 阿比舍克·卡马尔（Abhishek Kamal）
source

这些似乎都无法在Firefox上运行（使用Mac Firefox 69）

— Ben Wheeler

1

答案很简单：

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

— 获得
source

-1

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

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

— 阿洛克斯
source

-2

根据我自己的答案，只需在图像上添加相同大小的完全透明的元素。调整图像大小时，请确保调整元素的大小。

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

— 黑貂
source