stop Chrome's click and hold / drag image default behavior
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"
Related videos on Youtube
Irfan Mir
Updated on September 16, 2022Comments
-
Irfan Mir over 1 year
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?
-
Bigood almost 11 years+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 about 7 yearsThere is no IE equivalent to this property.
-
Phil about 6 yearsThis is also useful to prevent links styled as buttons (Bootstrap a.btn) from being accidentally dragged by a clumsy user (me)
-
Ben Wheeler over 4 yearsDoes not seem to work on Firefox (using Mac Firefox 69
-
Ben Wheeler over 4 yearsDoes not seem to work on Firefox (using Mac Firefox 69)
-
Bigood over 4 years@BenWheeler Indeed, it's a webkit property, not a standard (thus the mandatory -webkit prefix).
-
Brian Klug over 3 yearsThis 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.