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?

Solution 1

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

Solution 2

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

Solution 3

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"

Comments

[Bigood]

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

[chopper draw lion4]

There is no IE equivalent to this property.

[Phil]

This is also useful to prevent links styled as buttons (Bootstrap a.btn) from being accidentally dragged by a clumsy user (me)

[Ben Wheeler]

Does not seem to work on Firefox (using Mac Firefox 69

[Ben Wheeler]

Does not seem to work on Firefox (using Mac Firefox 69)

[Bigood]

@BenWheeler Indeed, it's a webkit property, not a standard (thus the mandatory -webkit prefix).

[Brian Klug]

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.