Menu
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?
977
Setting the draggable HTML Attribute to false We can also set the draggable HTML attribute of the img element we want to disable dragging for to false . to disable dragging. To do the same thing with JavaScript, we can use the setAttribute method: const img = document.
if you add draggable="false" to the image tag, it will stop being draggable.
Fixing Drag-and-DropType "Touch" into the search bar and set the following options to "Enabled". You will have to relaunch Google Chrome for these setting changes to apply. Once you have relaunched Google Chrome, drag-and-drop gestures should now work on most compatible websites.
Just hold on your left mouse button, performing a drag-n-drop, yeah, links open in the new tab. With CTRL button holding on, drag-n-drop, your web page will be opened in an inactive state. The drag-to-search feature is also useful and friendly to use.
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)
Add a .nonDraggableImage class on your img tags, and add on your CSS :
.nonDraggableImage{ -webkit-user-drag: none; } 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
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
