Disable dragging an image from an HTML page


Disable dragging an image from an HTML page

I need to put an image in my page. I want to disable dragging of that image. I am trying lot of things but no help. Can somebody help me out ?
I don’t want to keep that image as a background-image because I am resizing the image.


Solution 1:

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

Solution 2:

CSS only solution: use pointer-events: none


Solution 3:

just add draggable=”false” to your image tag:

<img draggable="false" src="image.png">

IE8 and under doesn’t support however.

Solution 4:

window.ondragstart = function() { return false; } 

Solution 5:

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

Solution 6:

I tried myself and found this is working.

    return false;

I am sure this disables dragging of all the images. Not sure it effects something else.