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

16,111

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"

Share:
16,111

Related videos on Youtube

Irfan Mir
Author by

Irfan Mir

Updated on September 16, 2022

Comments

  • Irfan Mir
    Irfan Mir about 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
    Bigood over 10 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
    chopper draw lion4 over 6 years
    There is no IE equivalent to this property.
  • Phil
    Phil over 5 years
    This is also useful to prevent links styled as buttons (Bootstrap a.btn) from being accidentally dragged by a clumsy user (me)
  • Ben Wheeler
    Ben Wheeler about 4 years
    Does not seem to work on Firefox (using Mac Firefox 69
  • Ben Wheeler
    Ben Wheeler about 4 years
    Does not seem to work on Firefox (using Mac Firefox 69)
  • Bigood
    Bigood about 4 years
    @BenWheeler Indeed, it's a webkit property, not a standard (thus the mandatory -webkit prefix).
  • Brian Klug
    Brian Klug about 3 years
    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.