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 dr

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

Answer 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

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