Disable dragging an image from an HTML page

I need to put an image in my page. I want to开发者_如何学Python 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.

---

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

---

CSS only solution: use pointer-events: none

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

---

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

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

IE8 and under doesn't support however.

---

window.ondragstart = function() { 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

---

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.

---

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

---

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)

---

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

---

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

---

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.

---

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

---

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)

---

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

---

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.

---

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

---

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

---

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;

---

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.

---

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

---

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

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

---

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

the on function attachs an event handler function for one or more events to the selected elements

---

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

---

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.