Disable dragging an image from an HTML page

javascript jquery html css image

255,591

Solution 1

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 2

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 3

CSS only solution: use pointer-events: none

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

Solution 4

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

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

IE8 and under doesn't support however.

Solution 5

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

View more solutions

255,591

Puru

Updated on September 28, 2021

Comments

Puru over 2 years

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.
- Puru over 13 years
  
  @AgentConundrum - There is no problem for me if the user saves and does whatever he wants. My only requirement is to not to drag that image.
Puru over 13 years

@alex - The purpose of not have image dragging is not stealing the image. The purpose is completely different. I am making that image as sortable and droppable. So it takes a long time to explain it.
Puru over 13 years

@alex - Is ondragstart is browser independent ?
Alex over 13 years

Ah! You should've mentioned you were using jQuery/could use jQuery. +1 for using jQuery.
user3167101 over 13 years

@Multiplexer It seems to be except for < Firefox 3.5
Puru over 13 years

@alex - I am sorry. I was trying it my self. And I am not sure it effects something else.
Alex over 13 years

you are fine! No, as far as I know, doing what you have here should not have any negative effects on anything else.
Dr.Molle over 13 years

+1 Don't understand the downvotes. It's not the ultimate solution, while it prevents dragging all, not only a special image. But it shows the right direction(and I think it was the first answer which does it)
user3167101 over 13 years

@DrMolle It may have been in response to the (since deleted) comments left by Steve on my answer.
ialphan over 11 years

Using .on it will be like this: $(document).on('dragstart','img',function(e){e.preventDefaul‌t();});
jClark over 11 years

Remember that sometimes people will drag a link to their bookmarks bar -- this solution would remove this ability.
Bhumi Singhal about 11 years

But this lead to the weird selection effect in FF atleast. Better still return false;
bearfriend about 11 years

This is the correct solution. One event binding for unlimited img elements, present or future. Least intensive, most robust.
Nilesh patel almost 11 years

it is not used when image as link.
SeinopSys almost 11 years

What if the image is wrapped inside an <a> tag? Then if the user clicks the image, the link wouldn't get clicked.
Justin Tanner almost 11 years

Looks like this won't work in IE (any version) see: caniuse.com/pointer-events
user3167101 almost 11 years

Also a CSS only solution: place an element over the img.
borisdiakur over 10 years

@Shane No, it's not! Some of us still need to support IE9 and worse.
Shane over 10 years

Hehe, gotcha @Lego. Curse you older IE! :)
sampoh over 10 years

This forces the cursor type to cursor: default :'(
Denys Vitali over 9 years

-1 ! This should be used to prevent ALL ponter events (including dragging over, like when you want to upload an image). Use javascript solution isntead!
Johanna over 9 years

Thanks. Btw, this also works in GWT with a ` event.preventDefault();`.
rybo111 almost 8 years

@AdamMerrifield Try $(document) instead of $(window)
rybo111 almost 8 years

I just worked out you can simplify the jQuery to: $('img').on('dragstart', false);
user3167101 almost 8 years

@rybo111 Perhaps you could, but I would avoid it as a) AFAIK it's not documented by jQuery and b) confusing to what it would actually be doing.
Adam Merrifield almost 8 years

@alex Under handler: The value false is also allowed as a shorthand for a function that simply does return false.
user3167101 almost 8 years

@AdamMerrifield Well there you go. One thing to note is it will prevent propagation too, which could be a problem.
Dean Christian Armada over 7 years

It's draggable in firefox
Andy B over 6 years

For my problem (i wanted no interaction at all in a div) this worked for modern browsers
Soleil about 6 years

This prevents any interaction, not just drag-drop
Thielicious about 6 years

$('img').mousedown(false) shorter. And @SeinopSys What browser you're using? It still works at least for me (FF v59.0.2). Didn't test with other browsers though but here a fiddle for test.
Gem over 5 years

I am using Magento so my div like : <div class="product-img-box"> <?php echo $this->getChildHtml('media') ?> </div> How can i restrict right click and no draggable my image div. @dmo
Ben Wheeler over 4 years

Neither of these seem to work on Firefox (using Mac Firefox 69)
Ben Wheeler over 4 years

Does not seem to work on Firefox (using Mac Firefox 69)
asciidude over 2 years

Shows how to do it, sure, but it prevents dragging everything which is eh.. Upvote anyway, for showing how to do it.
Jim Dandy BOA over 2 years

All the time wasted on other attempts that failed, THIS SOLUTION WORKS!!!
ashleedawg over 2 years

@alex: how do you place an element over it using css-only??!
user1432181 about 2 years

Demonstrator found at jsfiddle.net/Abeeee/x2fs8Lqa/4
user1432181 about 2 years

Demonstrator found at jsfiddle.net/Abeeee/x2fs8Lqa/7