Disable dragging an image from an HTML page
JavascriptJqueryHtmlCssImageJavascript Problem Overview
I need to put an image in my page. I want to disable dragging of that image. I am trying lot of things but no help. Can somebody help me out ?
I don't want to keep that image as a background-image because I am resizing the image.
Javascript Solutions
Solution 1 - Javascript
You can like this...
document.getElementById('my-image').ondragstart = function() { return false; };
See it working (or not working, rather)
It seems you are using jQuery.
$('img').on('dragstart', function(event) { event.preventDefault(); });
Solution 2 - Javascript
CSS only solution: use pointer-events: none
Solution 3 - Javascript
just add draggable="false" to your image tag:
<img draggable="false" src="image.png">
IE8 and under doesn't support however.
Solution 4 - Javascript
window.ondragstart = function() { return false; }
Solution 5 - Javascript
simplest cross browser solution is
<img draggable="false" ondragstart="return false;" src="..." />
problem with
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;
}
is that it is not working in firefox
Solution 6 - Javascript
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.
Solution 7 - Javascript
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;
}
I used it on my website at http://www.namdevmatrimony.in/ It's works like a magic!!! :)
Solution 8 - Javascript
See this answer; in Chrome and Safari you can use the following style to disable the default dragging:
-webkit-user-drag: auto | element | none;
You could try user-select for Firefox and IE(10+):
-moz-user-select: none | text | all | element
-ms-user-select: none | text | all | element
Solution 9 - Javascript
You can use inline code for this
<img draggable="false" src="http://www.ourkanpur.com/images/logo.png">
And the second option is use external or on-page 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">
Both are Working Correctly I m using external css on this site (Click Here)
Solution 10 - Javascript
You can add the following to each image you don't want to be draggable, (inside the img tag):
onmousedown="return false;"
e.g.
img src="Koala.jpg" onmousedown="return false;"
Solution 11 - Javascript
Directly use this: ondragstart="return false;" in your image tag.
<img src="http://image-example.png" ondragstart="return false;"/>
If you have multiple images, wrapped on a <div> tag:
<div ondragstart="return false;">
<img src="image1.png"/>
<img scr="image2.png"/>
</div>
Works in all major browsers.
Solution 12 - Javascript
This code does exactly what you want. It prevents the image from dragging while allowing any other actions that depend on the event.
$("img").mousedown(function(e){
e.preventDefault()
});
Solution 13 - Javascript
Since my images were created using ajax, and therefore not available on windows.load.
$("#page").delegate('img', 'dragstart', function (event) { event.preventDefault(); });
This way I can control which section blocks the behavior, it only uses one event binding and it works for future ajax created images without having to do anything.
With jQuery new on binding:
$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); });
(thanks @ialphan)
Solution 14 - Javascript
<img draggable="false" src="images/testimg1.jpg" alt=""/>
Solution 15 - Javascript
Great solution, had one small issue with conflicts, If anyone else has conflict from other js library simply enable no conflict like so.
var $j = jQuery.noConflict();$j('img').bind('dragstart', function(event) { event.preventDefault(); });
Hope this helps someone out.
Solution 16 - Javascript
Well I don't know if the answers in here have helped everyone or not, but here's a simple inline CSS trick which would definitely help you to disable dragging and selecting texts on a HTML page.
On your <body> tag add ondragstart="return false". This will disable dragging of images. But if you also want to disable text selection then add onselectstart="return false".
The code will look like this: <body ondragstart="return false" onselectstart="return false">
Solution 17 - Javascript
You may consider my solution the best. Most of answers are not compatible with old browsers like IE8 since e.preventDefault() wont be supported as well as ondragstart event. To do it cross browser compatible you have to block mousemove event for this image. See example below:
jQuery
$("#my_image").mousemove( function(e) { return false } ); // fix for IE
$("#my_image").attr("draggable", false); // disable dragging from attribute
without 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 });
}
tested and worked even for IE8
Solution 18 - Javascript
Set the following CSS properties to the image:
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
Solution 19 - Javascript
jQuery:
$('body').on('dragstart drop', function(e){
e.preventDefault();
return false;
});
You can replace the body selector with any other container that children you want to prevent from being dragged and dropped.
Solution 20 - Javascript
Well, this is possible, and the other answers posted are perfectly valid, but you could take a brute force approach and prevent the default behavior of mousedown on images. Which, is to start dragging the image.
Something like this:
window.onload = function () {
var images = document.getElementsByTagName('img');
for (var i = 0; img = images[i++];) {
img.ondragstart = function() { return false; };
}
};
Solution 21 - Javascript
document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
e.preventDefault();
});
Works in this Plunker http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml
Solution 22 - Javascript
Answer is simple:
<body oncontextmenu="return false"/> - disable right-click
<body ondragstart="return false"/> - disable mouse dragging
<body ondrop="return false"/> - disable mouse drop
Solution 23 - Javascript
An elegant way to do it with JQuery
$("body").on('mousedown','img',function(e){
e.stopPropagation();
e.preventDefault();
});
Solution 24 - Javascript
I did the css properties shown here as well as monitor ondragstart with the following javascript:
handleDragStart: function (evt) {
if (evt.target.nodeName.match(/^(IMG|DIV|SPAN|A)$/i)) {
evt.preventDefault();
return false;
}
},
Solution 25 - Javascript
Stealing from my own answer, just add a completely transparent element of the same size over the image. When you resize your image, be sure to resize the element.
This should work for most browsers, even older ones.