禁止从HTML页面拖动图像
我需要在我的页面上放置一张图片。 我想禁用拖动该图像。 我正在尝试很多东西，但没有帮助。 有人能帮我吗？
我不想将该图像作为背景图像，因为我正在调整图像大小。
你可以这样…
document.getElementById('my-image').ondragstart = function() { return false; }; 看到它工作（或不工作，而是）
看来你正在使用jQuery。
$('img').on('dragstart', function(event) { event.preventDefault(); });
仅CSS解决scheme：使用pointer-events: none
只需将draggable =“false”添加到您的图片标签即可：
<img draggable="false" src="image.png">
但IE8和下不支持。
window.ondragstart = function() { return false; }
我尝试着自己，发现这是工作。
$("img").mousedown(function(){ return false; });
我相信这会禁止拖动所有的图像。 不知道它影响别的。
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/这是像一个神奇的作品！; 🙂
看到这个答案 ; 在Chrome和Safari中，您可以使用以下样式来禁用默认拖动：
-webkit-user-drag: auto | element | none;
你可以尝试用户select Firefox和IE浏览器（10 +）：
-moz-user-select: none | text | all | element -ms-user-select: none | text | all | element
您可以将以下内容添加到您不想拖动的每张图片（在img标签内）：
onmousedown="return false;"
例如
img src="Koala.jpg" onmousedown="return false;"
这段代码完全是你想要的。 它可以防止拖动图像，同时允许任何其他依赖于事件的操作。
$("img").mousedown(function(e){ e.preventDefault() });
由于我的图像是使用ajax创build的，因此在windows.load上不可用。
$("#page").delegate('img', 'dragstart', function (event) { event.preventDefault(); });
这样我可以控制哪个部分阻止行为，它只使用一个事件绑定，它为未来的Ajax创build的图像工作，而不必做任何事情。
用jQuery绑定新的：
$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); }); （谢谢@ialphan）
直接使用这个： 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>
适用于所有主stream浏览器。
伟大的解决scheme，有一个小冲突的问题，如果任何人有其他的Js库的冲突，只是没有这样的冲突。
var $j = jQuery.noConflict();$j('img').bind('dragstart', function(event) { event.preventDefault(); });
希望这可以帮助别人。
那么我不知道在这里的答案是否有帮助，但这里有一个简单的内联CSS技巧，它肯定会帮助你禁用拖动和selectHTML页面上的文本。
在你的<body>标签上添加ondragstart="return false" 。 这将禁用图像的拖动。 但是，如果你也想禁用文本select，然后添加onselectstart="return false" 。
代码如下所示： <body ondragstart="return false" onselectstart="return false">
<img draggable="false" src="images/testimg1.jpg" alt=""/>
那么，这是可能的，其他答案张贴是完全有效的，但你可以采取暴力的方法，并防止默认行为的图像mousedown 。 其中，是开始拖动图像。
像这样的东西：
window.onload = function () { var images = document.getElementsByTagName('img'); for (var i = 0; img = images[i++];) { img.ondragstart = function() { return false; }; } };
document.getElementById('#yourImageId').addEventListener('dragstart', function(e) { e.preventDefault(); });
适用于这个Plunker http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml
你可以认为我的解决scheme是最好的。 大多数答案都不像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 }); }
testing和工作，即使是IE8
最简单的跨浏览器解决scheme是
<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中工作
将以下CSS属性设置为图像：
user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none;
偷我自己的答案 ，只是在图像上添加一个完全透明的相同大小的元素。 调整图像大小时，请务必调整元素的大小。
这应该适用于大多数浏览器，甚至更旧的浏览器。
我做了这里显示的CSS属性以及使用以下JavaScript监视ondragstart：
handleDragStart: function (evt) { if (evt.target.nodeName.match(/^(IMG|DIV|SPAN|A)$/i)) { evt.preventDefault(); return false; } },
