Disable dragging of image in entire project HTML pages

Question

I want to disable dragging of all the images in my project which has a large amount of images. The results that I found on web was to disable a particular image. Putting draggable="false" inside every image tag would take a lot of time. So I want a solution to disable them together.

I was successful to disable dragging with this code but it's still draggable in Firefox .

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

I've already gone through Disable dragging an image from an HTML page but found no answer to my question.

score 1 · Answer 1 · answered May 30 '20 at 04:24

For specific image you can do something like this, it will work on all browsers

<!-- right image (dragging disabled) -->
<img src="https://contribute.geeksforgeeks.org/wp-content/uploads/gfg-39.png" onmousedown="if (event.preventDefault) event.preventDefault()">

If you want all of your images non draggable in all browsers including firefox then few lines of javascript can do that for you!

// register onLoad event with anonymous function
window.onload = function(e) {
  var evt = e || window.event, // define event (cross browser)
    imgs, // images collection
    i; // used in local loop
  // if preventDefault exists, then define onmousedown event handlers
  if (evt.preventDefault) {
    // collect all images on the page
    imgs = document.getElementsByTagName('img');
    // loop through fetched images
    for (i = 0; i < imgs.length; i++) {
      // and define onmousedown event handler
      imgs[i].onmousedown = disableDragging;
    }
  }
};

// disable image dragging
function disableDragging(e) {
  e.preventDefault();
}

<img src="https://contribute.geeksforgeeks.org/wp-content/uploads/gfg-39.png">

<img src="https://contribute.geeksforgeeks.org/wp-content/uploads/gfg-39.png">

<img src="https://contribute.geeksforgeeks.org/wp-content/uploads/gfg-39.png">

Vaibhav · Accepted Answer · 2020-06-12T05:51:47.880

1

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

edited Jun 12 '20 at 05:51

answered May 30 '20 at 04:32

Vaibhav

1,412
1
10
14

This answer was more efficient than others. It helped me to solve the issue. I hope the question was not very silly for you. – Kundan Jun 04 '20 at 09:58
How to implement this in REACT ? – Kundan Jun 06 '20 at 02:01
@Kundan you removed tag of accepted answer to ask how to do it in React? it's not fair, even React word is not mentioned in your question :D – Vaibhav Jun 08 '20 at 06:02
But if you think I removed it due to I asked it for REACT, then I'm putting it back. I hope you liked my question. If yes do give a upvote. – Kundan Jun 12 '20 at 02:50

Disable dragging of image in entire project HTML pages

2 Answers2