Disable dragging an image from an HTML page

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.

Answers:

Answer

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(); });
Answer

CSS only solution: use pointer-events: none

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

Answer

just add draggable="false" to your image tag:

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

IE8 and under doesn't support however.

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

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

Answer

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
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!!! :)

Answer

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
Answer

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

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()
});
Answer

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.

Answer

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)

Answer

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.

Answer

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

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

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

Answer

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

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

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.

Answer

Answer is simple:

<body oncontextmenu="return false"/> - disable right-click <body ondragstart="return false"/> - disable mouse dragging <body ondrop="return false"/> - disable mouse drop

Answer

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

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)

Answer

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.

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

Works in this Plunker http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.