Menu
On double click on a text or image, it is highlighted (selected). The user select property can be used to prevent this. By setting this property to none, we can prevent our image from being selected (highlighted).
on("contextmenu", "img", function(e) { return false; });
To make an object draggable set draggable=true on that element. Just about anything can be drag-enabled: images, files, links, files, or any markup on your page.
You can like this...
document.getElementById('my-image').ondragstart = function() { return false; };
See it working (or not working, rather)
It seems you are using jQuery.
$('img').on('dragstart', function(event) { event.preventDefault(); });
CSS only solution: use pointer-events: none
https://developer.mozilla.org/en-US/docs/CSS/pointer-events
just add draggable="false" to your image tag:
<img draggable="false" src="image.png">
IE8 and under doesn't support however.
window.ondragstart = function() { return false; }
simplest cross browser solution is
<img draggable="false" ondragstart="return false;" src="..." />
problem with
img {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-drag: none;
user-drag: none;
-webkit-touch-callout: none;
}
is that it is not working in firefox
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