stop Chrome's click and hold / drag image default behavior
css, google-chrome, html, javascript, jquery
Solution
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;
}
Problem
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?