stop Chrome's click and hold / drag image default behavior

Question

I've noticed that in Google Chrome, one can click and hold an image and while holding a semi-transparent copy of that image attaches itself with the cursor. Then one can drag that image to the desktop to save it.

I want to prevent and stop the semi-transparent version of the image attaching itself to the cursor on hold of certain images in my site.

How can I do this?

Maen · Accepted Answer · 2013-04-29T16:08:32.873

53

You can prevent this behavior by using the property

-webkit-user-drag: auto | element | none;

See the doc of -webkit-user-drag CSS-infos.net (I didn't find an MDN doc, if someone has a better reference)

How to use

Add a .nonDraggableImage class on your img tags, and add on your CSS :

.nonDraggableImage{
    -webkit-user-drag: none;
}

edited Apr 29 '13 at 16:08

answered Apr 29 '13 at 16:02

Maen

10,603
3
45
71

There is no IE equivalent to this property. – chopper draw lion4 Apr 05 '17 at 18:36
This is also useful to prevent links styled as buttons (Bootstrap a.btn) from being accidentally dragged by a clumsy user (me) – Phil Mar 08 '18 at 14:59
Does not seem to work on Firefox (using Mac Firefox 69) – Ben Wheeler Sep 23 '19 at 18:06
@BenWheeler Indeed, it's a webkit property, not a standard (thus the mandatory -webkit prefix). – Maen Sep 25 '19 at 14:20

score 5 · Answer 2 · answered Oct 11 '17 at 04:57

5

I had to use a different solution to get it working:

<img src="http://placehold.it/150x150" draggable="false">

Thanks: https://stackoverflow.com/a/7439078/2443005

answered Oct 11 '17 at 04:57

BBlackwo

1,376
1
16
16

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

This is the correct answer in 2020. Works on Firefox, Chrome, Opera, Edge and even Internet Explorer. Funny how this is downvoted and the "-webkit-user-drag" answer .. which obviously will only work on webkit based browsers (lol) is upvoted. Maybe it's just out of date. – Brian Klug Aug 17 '20 at 15:06

score 2 · Answer 3 · answered Apr 29 '13 at 16:05

2

Another way is to create a transparent picture over the top of the picture you want to prevent viewing.

Please see: http://www.dwuser.com/education/content/stop-the-thieves-strategies-to-protect-your-images/

check under "Tricking the downloaders"

answered Apr 29 '13 at 16:05

Sablefoste

4,032
3
37
58

+1 Nice trick :) as it prevents basic user from right clicking and saving. But the "clean" way to prevent OP's behavior is still to use `-webkit-user-drag: none;` – Maen Apr 29 '13 at 16:06

score 0 · Answer 4 · answered Nov 30 '21 at 06:35

I like to use - draggable

draggable="false"

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

But you can try - ondragstart

ondragstart="return false;"

<img ondragstart="return false;" src="image.jpg">

or - pointer-events (some browser don't support & also have other problems)

style="pointer-events: none;"

<img src="image.jpg" style="pointer-events: none;">

stop Chrome's click and hold / drag image default behavior

4 Answers4

How to use

Linked