Skip to main content

How to Disable Drag and Drop on an HTML Element using JavaScript

By default, certain HTML elements like images (<img>) and links (<a>) are draggable in the browser. While this is sometimes useful, it can also interfere with custom user interactions or be visually distracting. Disabling this default behavior is a common requirement in web development.

This guide will teach you the two most effective methods for disabling drag and drop. You will learn the simple HTML approach using the draggable attribute and the more flexible JavaScript approach using event listeners.

The Easiest Method: The draggable="false" Attribute​

The simplest and most direct way to disable dragging on a specific element is to add the draggable="false" attribute directly to your HTML.

For example, you have an image that you do not want users to be able to drag around the page.

<!-- Problem: This image is draggable by default -->
<img src="logo.png" alt="Company Logo">

Solution: add draggable="false" to the <img> tag.

<img src="logo.png" alt="Company Logo" draggable="false">
note

The draggable="false" attribute explicitly tells the browser that this element should not be draggable. It is the cleanest and most semantic way to disable dragging for a specific element.

You can also set this attribute dynamically using JavaScript:

const myImage = document.getElementById('my-image');
myImage.draggable = false; // Set the DOM property directly

The JavaScript Method: Preventing the dragstart Event​

A more flexible and powerful approach is to use a JavaScript event listener. The dragstart event is fired on an element when a user begins to drag it. By capturing this event and calling event.preventDefault(), you can cancel the drag operation before it even begins.

note

This method is ideal when you want to disable dragging for a whole group of elements or an entire section of your page.

For example, you have a container div and want to disable dragging for every element inside it.

HTML:

<div id="no-drag-zone">
  <img src="icon.png" alt="Icon">
  <a href="#">A draggable link</a>
  <p>Some text that could be selected and dragged.</p>
</div>

Solution: add a dragstart event listener to the parent container.

const noDragZone = document.getElementById('no-drag-zone');

noDragZone.addEventListener('dragstart', (event) => {
  // Prevent the default drag action
  event.preventDefault();
});

Because the dragstart event "bubbles up" from a child element to its parents, this single listener on the div will catch and cancel any drag attempt on the image, the link, or any other element inside it.

How to Disable Drag and Drop Globally​

If you want to disable drag and drop for every single element on your entire page, you can apply the same event listener logic to the document or window object.

// Disable dragging for the entire document
window.addEventListener('dragstart', (event) => {
  event.preventDefault();
});
note

This is a powerful "catch-all" but should be used with caution, as it can interfere with expected browser behavior, such as dragging text into an input field. It's generally better to target specific containers.

Practical Example: Preventing Image Dragging​

A common use case is to prevent the "ghost image" that appears when a user accidentally drags a UI element like an icon or a logo.

HTML:

<div class="product-card">
  <img src="product.jpg" class="product-image" alt="Product">
  <h3>Product Name</h3>
</div>

JavaScript: this script ensures that only the product card itself is interactive, and the images within it are not draggable, leading to a cleaner user experience.

// Select all product images on the page
const productImages = document.querySelectorAll('.product-image');

// Loop through them and make them non-draggable
productImages.forEach(img => {
  img.draggable = false;
});

Conclusion​

Disabling drag and drop is a simple task with two excellent solutions.

  • To disable dragging on a single, specific element, the best and most semantic method is to add the draggable="false" attribute directly in your HTML or via JavaScript.
  • To disable dragging for a group of elements or an entire section, the recommended best practice is to add a dragstart event listener to a common parent container and call event.preventDefault().

By choosing the right method, you can easily control the drag-and-drop behavior of your page and create a more polished user interface.

Table of Contents