Learn with us

The HTML Drag and Drop API provides a way to implement drag-and-drop functionality in web applications. It allows users to drag elements on a web page and drop them onto designated drop zones. Here’s an overview of how to use the HTML Drag and Drop API:

1. Making an Element Draggable:
   To make an element draggable, you need to set the draggable attribute to true. You can do this by adding the attribute directly to the HTML element or using JavaScript.

   <div draggable="true">Drag me!</div>

2. Handling Drag Events:
   The Drag and Drop API provides several events that you can listen to in order to handle the drag and drop actions. The main events are:

• dragstart: Fired when the user starts dragging an element.
• drag: Fired continuously as the element is being dragged.
• dragend: Fired when the user stops dragging the element. You can add event listeners to these events on the draggable element to perform actions or modify behavior.

   const draggableElement = document.querySelector('div');

   draggableElement.addEventListener('dragstart', (event) => {
     // Custom logic when the drag starts
     event.dataTransfer.setData('text/plain', 'Drag me!');
   });

   draggableElement.addEventListener('drag', (event) => {
     // Custom logic while dragging
   });

   draggableElement.addEventListener('dragend', (event) => {
     // Custom logic when the drag ends
   });

3. Defining Drop Zones:
   To specify drop zones on your web page, you need to handle the drop events on the target elements. The main drop events are:

• dragenter: Fired when a draggable element enters a drop zone.
• dragover: Fired continuously as a draggable element is being dragged over a drop zone.
• dragleave: Fired when a draggable element leaves a drop zone.
• drop: Fired when a draggable element is dropped onto a drop zone. You can add event listeners to these events on the drop zone elements to define how they should react to the draggable element.

   const dropZone = document.querySelector('.drop-zone');

   dropZone.addEventListener('dragenter', (event) => {
     // Custom logic when a draggable element enters the drop zone
   });

   dropZone.addEventListener('dragover', (event) => {
     event.preventDefault(); // Allow dropping on the element
     // Custom logic while a draggable element is being dragged over the drop zone
   });

   dropZone.addEventListener('dragleave', (event) => {
     // Custom logic when a draggable element leaves the drop zone
   });

   dropZone.addEventListener('drop', (event) => {
     event.preventDefault(); // Prevent default browser behavior
     // Custom logic when a draggable element is dropped onto the drop zone
   });

Note that in order to allow a drop to occur, you need to call event.preventDefault() on the dragover event listener to override the default browser behavior.

The HTML Drag and Drop API provides a flexible way to implement drag-and-drop functionality in web applications. It allows users to interact with elements by dragging them and dropping them onto specified drop zones. By handling the various drag and drop events, you can customize the behavior and perform actions based on the user’s actions.