Disable dragging an image from an HTML page

Question

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.

@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, Nov 18 '10 at 08:45

alex · Answer 1 · 2013-06-27T01:25:28.890

294

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

edited Jun 27 '13 at 01:25

answered Nov 18 '10 at 05:21

alex

479,566
201
878
984

10

@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 Nov 18 '10 at 05:29
2

@alex - Is ondragstart is browser independent ? – Puru Nov 18 '10 at 05:34
@Multiplexer It seems to be except for < Firefox 3.5 – alex Nov 18 '10 at 05:37
1

@AdamMerrifield Try `$(document)` instead of `$(window)` – rybo111 Jun 21 '16 at 12:55
2

I just worked out you can simplify the jQuery to: `$('img').on('dragstart', false);` – rybo111 Jun 21 '16 at 12:59
@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. – alex Jun 22 '16 at 08:21
2

@alex Under handler: [`The value false is also allowed as a shorthand for a function that simply does return false.`](https://api.jquery.com/on/) – Adam Merrifield Jun 22 '16 at 14:35
1

@AdamMerrifield Well there you go. One thing to note is it will prevent propagation too, which could be a problem. – alex Jun 22 '16 at 14:37

score 211 · Answer 2 · answered Jan 21 '13 at 05:11

211

CSS only solution: use pointer-events: none

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

answered Jan 21 '13 at 05:11

mikhuang

2,694
2
19
17

7

But this lead to the weird selection effect in FF atleast. Better still return false; – Bhumi Singhal Feb 22 '13 at 10:24
4

it is not used when image as link. – Nilesh patel May 17 '13 at 04:37
5

Looks like this won't work in IE (any version) see: http://caniuse.com/pointer-events – Justin Tanner Jun 15 '13 at 10:18
11

Also a *CSS only* solution: place an element *over* the `img`. – alex Aug 03 '13 at 11:08
@Shane No, it's not! Some of us still need to support IE9 and worse. – borisdiakur Aug 19 '13 at 20:17
Hehe, gotcha @Lego. Curse you older IE! :) – Shane Aug 21 '13 at 14:04
This forces the cursor type to `cursor: default` :'( – sampoh Nov 22 '13 at 07:50
10

-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! – Denys Vitali Aug 16 '14 at 09:55
For my problem (i wanted no interaction at all in a div) this worked for modern browsers – Andy B Feb 02 '18 at 15:39
This prevents any interaction, not just drag-drop – Soleil Apr 18 '18 at 11:29
@alex: how do you place an element over it using css-only??! – ashleedawg Jan 26 '22 at 22:16

score 201 · Answer 3 · answered Feb 27 '13 at 17:01

201

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

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

IE8 and under doesn't support however.

answered Feb 27 '13 at 17:01

dmo

5,102
3
25
28

score 50 · Answer 4 · edited Nov 18 '10 at 05:26

50

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

edited Nov 18 '10 at 05:26

alex

479,566
201
878
984

answered Nov 18 '10 at 05:24

Ben

54,723
49
178
224

4

+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) – Dr.Molle Nov 18 '10 at 05:49
@DrMolle It may have been in response to the (since deleted) comments left by Steve on [my answer](http://stackoverflow.com/posts/4211930/edit). – alex Nov 18 '10 at 05:59
2

Remember that sometimes people will drag a link to their bookmarks bar -- this solution would remove this ability. – jClark Dec 06 '12 at 15:16
Shows how to do it, sure, but it prevents dragging everything which is eh.. Upvote anyway, for showing how to do it. – asciidude Oct 16 '21 at 23:48

score 45 · Answer 5 · answered Apr 11 '17 at 12:08

45

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

answered Apr 11 '17 at 12:08

Imal Hasaranga Perera

9,683
3
51
41

Demonstrator found at https://jsfiddle.net/Abeeee/x2fs8Lqa/4/ – user1432181 Mar 21 '22 at 12:53

score 30 · Accepted Answer · answered Nov 18 '10 at 05:34

30

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.

answered Nov 18 '10 at 05:34

Puru

8,913
26
70
91

4

Ah! You should've mentioned you were using jQuery/could use jQuery. +1 for using jQuery. – Alex Nov 18 '10 at 05:37
@alex - I am sorry. I was trying it my self. And I am not sure it effects something else. – Puru Nov 18 '10 at 05:39
you are fine! No, as far as I know, doing what you have here should not have any negative effects on anything else. – Alex Nov 18 '10 at 05:40
2

What if the image is wrapped inside an `` tag? Then if the user clicks the image, the link wouldn't get clicked. – SeinopSys May 19 '13 at 12:10
Thanks. Btw, this also works in GWT with a ` event.preventDefault();`. – Johanna Dec 16 '14 at 11:46
`$('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](https://jsfiddle.net/Thielicious/prz0tqr3/) for test. – Thielicious Apr 18 '18 at 11:51
All the time wasted on other attempts that failed, THIS SOLUTION WORKS!!! – Jim Dandy BOA Oct 22 '21 at 03:53

score 26 · Answer 7 · answered Mar 10 '16 at 18:51

26

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

answered Mar 10 '16 at 18:51

Namdev Matrimony

269
3
2

8

It's draggable in firefox – Dean Christian Armada Aug 16 '16 at 23:12

Abhishek kamal · Answer 8 · 2019-04-19T12:04:19.220

20

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)

edited Apr 19 '19 at 12:04

answered Apr 19 '19 at 11:46

Abhishek kamal

221
2
6

1

Neither of these seem to work on Firefox (using Mac Firefox 69) – Ben Wheeler Sep 23 '19 at 18:03

score 16 · Answer 9 · edited May 23 '17 at 12:18

16

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

edited May 23 '17 at 12:18

Community

1
1

answered Sep 12 '13 at 21:48

mhu

17,720
10
62
93

score 13 · Answer 10 · edited Oct 04 '12 at 12:37

13

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

edited Oct 04 '12 at 12:37

bool.dev

17,508
5
69
93

answered Aug 01 '12 at 12:51

BOBO

131
1
3

score 13 · Answer 11 · answered Sep 02 '15 at 23:30

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.

score 11 · Answer 12 · edited Nov 09 '15 at 08:14

11

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

edited Nov 09 '15 at 08:14

Mo.

26,306
36
159
225

answered Aug 03 '12 at 05:45

Robert

111
1
2

guzart · Answer 13 · 2012-10-03T19:40:37.500

9

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)

edited Oct 03 '12 at 19:40

answered Feb 09 '12 at 15:43

guzart

3,700
28
23

1

Using .on it will be like this: $(document).on('dragstart','img',function(e){e.preventDefault();}); – ialphan Oct 02 '12 at 20:46
This is the correct solution. One event binding for unlimited `img` elements, present or future. Least intensive, most robust. – bearfriend Apr 29 '13 at 14:38

score 8 · Answer 14 · answered Nov 20 '14 at 07:45

8

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

answered Nov 20 '14 at 07:45

Mustafa

1,738
2
24
34

score 4 · Answer 15 · answered Nov 17 '14 at 10:21

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

CodeGems · Answer 16 · 2015-10-12T10:27:57.480

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

score 4 · Answer 17 · answered Apr 12 '17 at 10:51

4

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;

answered Apr 12 '17 at 10:51

Omid Farvid

785
7
13

1

Does not seem to work on Firefox (using Mac Firefox 69) – Ben Wheeler Sep 23 '19 at 18:03

score 4 · Answer 18 · answered Oct 29 '19 at 10:33

4

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.

answered Oct 29 '19 at 10:33

Lis

555
4
26

score 4 · Answer 19 · answered Nov 03 '11 at 23:04

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.

score 3 · Answer 20 · edited Oct 26 '14 at 01:08

3

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

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

edited Oct 26 '14 at 01:08

jbx

21,365
18
90
144

answered Jun 04 '14 at 19:50

dtothefp

1,364
1
16
22

score 3 · Answer 21 · edited Nov 10 '13 at 17:12

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

score 2 · Answer 22 · answered Jul 11 '19 at 01:34

2

Answer is simple:

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

answered Jul 11 '19 at 01:34

Gain

29
1

ucMedia · Answer 23 · 2022-06-30T13:16:10.140

2

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

edited Jun 30 '22 at 13:16

answered Feb 20 '21 at 13:13

ucMedia

4,105
4
38
46

1

Demonstrator found at https://jsfiddle.net/Abeeee/x2fs8Lqa/7/ – user1432181 Mar 21 '22 at 12:57

score 0 · Answer 24 · answered Sep 07 '17 at 14:31

0

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

answered Sep 07 '17 at 14:31

Alocus

1,860
3
21
32

score 0 · Answer 25 · answered May 22 '23 at 03:37

0

Simply use e.preventDefault(). Examples:

Pure HTML:

<img
  src={item.icon}
  onmousedown={(e) => {
    e.preventDefault()
  }}
/>

React

<img
  src={item.icon}
  onMouseDown={(e) => {
    e.preventDefault()
  }}
/>

answered May 22 '23 at 03:37

Duc Trung Mai

2,141
1
24
23

How is that "pure" HTML? It uses javascript. – Beyondo Jun 15 '23 at 10:43

score -1 · Answer 26 · edited May 23 '17 at 11:54

-1

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.

edited May 23 '17 at 11:54

Community

1
1

answered Jul 22 '16 at 13:12

Sablefoste

4,032
3
37
58

Disable dragging an image from an HTML page

26 Answers26

Linked

Related