[javascript] 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.

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

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

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.

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

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

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

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

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.

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

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 {_x000D_
  -moz-user-select: none;_x000D_
  -webkit-user-select: none;_x000D_
  -ms-user-select: none;_x000D_
  user-select: none;_x000D_
  -webkit-user-drag: none;_x000D_
  user-drag: none;_x000D_
  -webkit-touch-callout: none;_x000D_
}

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

Both are Working Correctly I m using external css on this site (Click Here)

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

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

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

IE8 and under doesn't support however.

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

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

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

CSS only solution: use pointer-events: none

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

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.

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

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

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

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.

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 is simple:

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

An elegant way to do it with JQuery

$("body").on('mousedown','img',function(e){
    e.stopPropagation();
    e.preventDefault();
});

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;