javascript - 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?

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