Disable drag and drop on HTML elements using JavaScript

# Table of Contents

# Disable drag and drop on HTML elements using JavaScript

To disable drag and drop on HTML elements:

Wrap the elements in a div.
Use the addEventListener() method to add event listeners for dragstart and drop.
Use the event.preventDefault() method in the event handler functions.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <div id="box">
      <img
        alt="favicon"
        src="https://www.google.com/favicon.ico"
      />
    </div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const box = document.getElementById('box');

box.addEventListener('dragstart', event => {
  event.preventDefault();
});

box.addEventListener('drop', event => {
  event.preventDefault();
});

disable drag and drop on html elements

The code for this article is available on GitHub

We used the document.getElementById() method to select the wrapper div by its ID.

The next step is to add an event listener for the dragstart and drop events.

The dragstart event is triggered when the user starts dragging an element or a text selection.

The drop event is triggered when an element or text selection is dropped on a valid drop target.

Inside our event handler functions, we simply call the event.preventDefault() method.

index.js

Copied!
const box = document.getElementById('box');

box.addEventListener('dragstart', event => {
  event.preventDefault();
});

box.addEventListener('drop', event => {
  event.preventDefault();
});

The event.preventDefault() method tells the browser to not take the default action of the event.

This disables drag-and-drop events for all elements that are placed within the div that has an id of box.

# Disabling drag and drop for all elements in the document

If you want to disable drag and drop for all elements in the document, you have to add the event listeners on the document.body element.

index.js

Copied!
document.body.addEventListener('dragstart', event => {
  event.preventDefault();
});

document.body.addEventListener('drop', event => {
  event.preventDefault();
});

disable drag and drop for all elements in the document

The code for this article is available on GitHub

# Disabling drag and drop for HTML elements with inline event handlers

You can also disable drag-and-drop events for HTML elements using inline event handlers.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <div
      id="box"
      ondragstart="event.preventDefault()"
      ondrop="event.preventDefault()"
    >
      <img
        alt="favicon"
        src="https://www.google.com/favicon.ico"
      />
    </div>
  </body>
</html>

disable drag and drop events using inline event handlers

The code for this article is available on GitHub

We set the ondragstart and ondrop attributes on the div element.

index.html

Copied!
<div
  id="box"
  ondragstart="event.preventDefault()"
  ondrop="event.preventDefault()"
>
  <img
    alt="favicon"
    src="https://www.google.com/favicon.ico"
  />
</div>

When the events are triggered, we simply call the event.preventDefault() method.

You could achieve the same result by returning false straight away.

index.html

Copied!
<div
  id="box"
  ondragstart="return false;"
  ondrop="return false;"
>
  <img
    alt="favicon"
    src="https://www.google.com/favicon.ico"
  />
</div>

If you want to disable drag-and-drop events for all elements in the document, set the ondragstart and ondrop attributes on the body element.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body
    ondragstart="event.preventDefault()"
    ondrop="event.preventDefault()"
  >
    <h2>bobbyhadz.com</h2>

    <div id="box">
      <img
        alt="favicon"
        src="https://www.google.com/favicon.ico"
      />
    </div>
  </body>
</html>

disable drag and drop events on all elements using inline handlers

The code for this article is available on GitHub

You could also achieve the same result by returning false from the inline event handlers.

index.html

Copied!
<body
  ondragstart="return false;"
  ondrop="return false;"
>
  <h2>bobbyhadz.com</h2>

  <div id="box">
    <img
      alt="favicon"
      src="https://www.google.com/favicon.ico"
    />
  </div>
</body>

# Disable drag and drop on HTML elements using the `mousedown` event

You can also use the mousedown event to disable drag and drop on HTML elements.

The event is triggered at an element when the user's pointing device button is pressed while the pointer is inside the element.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <div id="box">
      <img
        alt="favicon"
        src="https://www.google.com/favicon.ico"
      />
    </div>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

Copied!
const box = document.getElementById('box');

box.addEventListener('mousedown', event => {
  event.preventDefault();
});

disable drag and drop using mousedown event

The code for this article is available on GitHub

The example disables drag and drop on all elements that are within the div that has an id of box.

If you want to disable drag-and-drop events on all elements in the document, set the event listener on the document.body element.

index.js

Copied!
const box = document.getElementById('box');

document.body.addEventListener('mousedown', event => {
  event.preventDefault();
});

disable drag and drop on all elements using mousedown

# Disabling drag and drop by setting `draggable` to `false`

You can also disable drag and drop on an element by setting its draggable attribute to false.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <div id="box">
      <img
        alt="favicon"
        src="https://www.google.com/favicon.ico"
        draggable="false"
      />
    </div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

Notice that we set the draggable attribute to false on the img element.

index.html

Copied!
<img
  alt="favicon"
  src="https://www.google.com/favicon.ico"
  draggable="false"
/>

The draggable attribute has to be set to false directly on the element for which you want to disable drag and drop.

disable drag and drop by setting draggable false

The draggable attribute determines whether the element can be dragged.

The attribute can have the following 2 values:

true - the element can be dragged.
false - the element cannot be dragged.

You can also set the draggable attribute using JavaScript.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <div id="box">
      <img
        id="favicon"
        alt="favicon"
        src="https://www.google.com/favicon.ico"
      />
    </div>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

Copied!
const favicon = document.getElementById('favicon');

favicon.setAttribute('draggable', false);

The code for this article is available on GitHub

We used the setAttribute() method to set the draggable attribute to false.

If you need to remove the draggable attribute, use the removeAttribute() method.

index.js

Copied!
favicon.removeAttribute('draggable');

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Disable drag and drop on HTML elements using JavaScript

# Table of Contents