Disable Dragging an Image from an HTML Page

Disable dragging an image from an HTML page

I tried myself and found this is working.

$("img").mousedown(function(){
    return false;
});

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

Disable dragging of image in entire project HTML pages

You could add ondragstart attribute to single image & return false.

If you want to address multiple images

const imgs = document.getElementsByTagName('img');
for(let i = 0; i < imgs.length; i++ ) {
    imgs[i].setAttribute("ondragstart", "return false")
}

Note from React Synthetic events

As of v0.14, returning false from an event handler will no longer stop event propagation. Instead, e.stopPropagation() or e.preventDefault() should be triggered manually, as appropriate.

So you need add to each image.

<img src={source} onDragStart={e => e.preventDefault()} />

Disable dragging in HTML webpage

You can use e.preventDefault() to prevent the default effect from happening inside your onmousedown event.

Add e.preventDefault() inside your enableToggle(e) function

function enableToggle(e) {
  isToggling = true;
  e.preventDefault()
}

If that doesn't work add it to toggle() and disableToggle()

how to disable dragging of an html element (especially img)?

It is impossible to prevent someone to store an image (or other resources) on their computer as others already have mentioned.

But another trick to make it harder (impossible for inexperienced people I guess) is to use CSS and background images:

<div style='background: url("myimage.gif");'></div>

The image is now on the background of the <div> block and cannot be dragged or right clicked in order to save it.

Using some coding knowledge it is possible to ind out the myimage.gif part, which can be added after the base URL in order download the image and save it. For example if the HTML page is at http://www.example.com/mypage.html the image could be found at http://www.example.com/myimage.gif

As I mentioned it is still possible to save the image, but for inexperienced people it is a lot harder.

Note: In this example the image is just put in the HTML tag, but with proper use of a CSS file, it is even harder to find for inexperienced people.

Disable dragging images from desktop to html

Try preventing the dragover event to

$(document).on('dragover drop', function(e){
  return false;
});

Disable drag & drop on HTML page?

You can't prevent users from copying your images, you can only make it less convenient. So its a matter of deciding how much effort you want to put into this prevention.

You will be able to prevent less sophisticated users via the methods you are using, but any image includes the href (file path on browser). A user could WGET the file, browse directly to the image, open up the Dev Tools, use an analog workaround (like the Windows screen snip tool), etc.

Disable Drag and Drop on HTML elements?

Try preventing default on mousedown event:

<div onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false">asd</div>

or

<div onmousedown="return false">asd</div>

---

Related Topics