Article Categories

Selected Reading

HTML DOM DragEvent

HTML Web Development Front End Technology

The HTML DOM DragEvent is a type of event that gets executed whenever elements are being dragged and dropped on a web page. This event interface was introduced in HTML5 and provides methods to handle drag-and-drop interactions between elements.

The DragEvent extends the MouseEvent interface and provides additional functionality specific to drag-and-drop operations. It allows developers to create interactive user interfaces where users can drag elements from one location and drop them onto valid drop targets.

Properties

Following is the main property for the HTML DOM DragEvent −

Property	Description
dataTransfer	Returns the DataTransfer object containing the data being dragged or dropped by the user. This object allows you to set and retrieve data during drag operations.

Syntax

Following is the syntax for attaching DragEvent handlers −

element.addEventListener('dragEventType', function(event) {
    // Handle the drag event
});

Alternatively, you can assign event handlers directly −

element.ondragEventType = function(event) {
    // Handle the drag event
};

DragEvent Types

Following are the event types belonging to the DragEvent object −

Event	Description
ondrag	Fires continuously while an element is being dragged.
ondragend	Fires when the user has finished dragging an element (released the mouse button).
ondragenter	Fires when a dragged element enters a valid drop target.
ondragleave	Fires when a dragged element leaves a valid drop target.
ondragover	Fires continuously while a dragged element is over a valid drop target.
ondragstart	Fires when the user starts dragging an element.
ondrop	Fires when a dragged element is dropped on a valid drop target.

Basic Drag and Drop Example

Following example demonstrates a simple drag-and-drop operation between two containers −

<!DOCTYPE html>
<html>
<head>
   <title>DragEvent Example</title>
   <style>
      .container {
         float: left;
         width: 150px;
         height: 100px;
         margin: 10px;
         border: 2px solid #333;
         background-color: #f0f0f0;
         text-align: center;
         padding: 10px;
      }
      .draggable {
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         border-radius: 5px;
         cursor: move;
         font-weight: bold;
      }
      .drop-target {
         border-color: #ff9800;
         background-color: #fff3e0;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif;">
   <h2>DragEvent Example</h2>
   <div class="container">
      <div id="dragItem" class="draggable" draggable="true">Drag Me!</div>
   </div>
   <div class="container drop-target" id="dropZone">
      Drop Here
   </div>
   <p id="status" style="clear: both; margin-top: 20px; font-weight: bold;"></p>

   <script>
      const dragItem = document.getElementById('dragItem');
      const dropZone = document.getElementById('dropZone');
      const status = document.getElementById('status');

      dragItem.ondragstart = function(event) {
         event.dataTransfer.setData("text/plain", event.target.id);
         status.textContent = "Drag operation started";
         event.target.style.opacity = "0.5";
      };

      dragItem.ondragend = function(event) {
         event.target.style.opacity = "1";
         status.textContent = "Drag operation ended";
      };

      dropZone.ondragover = function(event) {
         event.preventDefault();
         event.target.style.backgroundColor = "#e8f5e8";
      };

      dropZone.ondragleave = function(event) {
         event.target.style.backgroundColor = "#fff3e0";
      };

      dropZone.ondrop = function(event) {
         event.preventDefault();
         const draggedId = event.dataTransfer.getData("text/plain");
         const draggedElement = document.getElementById(draggedId);
         
         event.target.appendChild(draggedElement);
         event.target.style.backgroundColor = "#fff3e0";
         status.textContent = "Item successfully dropped!";
      };
   </script>
</body>
</html>

The output shows two containers where you can drag the green element from the first container to the second −

[Container with "Drag Me!" button] [Empty "Drop Here" container]
Status: (Updates during drag operations)

Advanced Drag and Drop with Multiple Items

Following example demonstrates dragging multiple items between different containers −

<!DOCTYPE html>
<html>
<head>
   <title>Advanced DragEvent Example</title>
   <style>
      .drag-container {
         width: 200px;
         height: 150px;
         border: 2px dashed #ccc;
         margin: 10px;
         padding: 10px;
         float: left;
         background-color: #fafafa;
      }
      .drag-item {
         background-color: #2196F3;
         color: white;
         padding: 8px;
         margin: 5px;
         border-radius: 4px;
         cursor: move;
         text-align: center;
      }
      .drag-over {
         border-color: #4CAF50;
         background-color: #e8f5e8;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif;">
   <h2>Multiple Item Drag and Drop</h2>
   <div class="drag-container" id="source">
      <h3>Source</h3>
      <div class="drag-item" draggable="true" id="item1">Item 1</div>
      <div class="drag-item" draggable="true" id="item2">Item 2</div>
      <div class="drag-item" draggable="true" id="item3">Item 3</div>
   </div>
   <div class="drag-container" id="target">
      <h3>Target</h3>
   </div>
   <div style="clear: both;">
      <p id="info">Drag items from source to target container.</p>
   </div>

   <script>
      const containers = document.querySelectorAll('.drag-container');
      const items = document.querySelectorAll('.drag-item');
      const info = document.getElementById('info');

      items.forEach(item => {
         item.ondragstart = function(event) {
            event.dataTransfer.setData("text/plain", event.target.id);
            event.target.style.opacity = "0.6";
            info.textContent = `Dragging: ${event.target.textContent}`;
         };

         item.ondragend = function(event) {
            event.target.style.opacity = "1";
         };
      });

      containers.forEach(container => {
         container.ondragover = function(event) {
            event.preventDefault();
            container.classList.add('drag-over');
         };

         container.ondragleave = function(event) {
            container.classList.remove('drag-over');
         };

         container.ondrop = function(event) {
            event.preventDefault();
            const draggedId = event.dataTransfer.getData("text/plain");
            const draggedElement = document.getElementById(draggedId);
            
            container.appendChild(draggedElement);
            container.classList.remove('drag-over');
            info.textContent = `${draggedElement.textContent} moved to ${container.querySelector('h3').textContent}`;
         };
      });
   </script>
</body>
</html>

This example allows you to drag any of the three items between the source and target containers. The containers highlight when items are dragged over them.

DataTransfer Object Methods

The dataTransfer property provides several useful methods for handling drag data −

Method	Description
setData(format, data)	Sets the data for the specified format during drag operation.
getData(format)	Retrieves the data for the specified format during drop operation.
clearData([format])	Removes data for the specified format, or all data if no format specified.
setDragImage(img, x, y)	Sets a custom image to display during drag operation.

Example with Custom Drag Image

<!DOCTYPE html>
<html>
<head>
   <title>Custom Drag Image Example</title>
   <style>
      .custom-drag {
         background-color: #FF5722;
         color: white;
         padding: 15px;
         margin: 20px;
         border-radius: 8px;
         cursor: move;
         display: inline-block;
      }
      .drop-area {
         width: 300px;
         height: 150px;
         border: 3px dashed #999;
         margin: 20px;
         text-align: center;
         line-height: 150px;
         background-color: #f9f9f9;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Custom Drag Image Example</h2>
   <div class="custom-drag" draggable="true" id="customDrag">
      Drag me with custom image!
   </div>
   <div class="drop-area" id="customDrop">
      Drop here
   </div>

   <script>
      const customDrag = document.getElementById('customDrag');
      const customDrop = document.getElementById('customDrop');

      customDrag.ondragstart = function(event) {
         // Create a custom drag image
         const dragImage = document.createElement('div');
         dragImage.textContent = '? Moving...';
         dragImage.style.cssText = `
            background: #4CAF50;
            color: white;
            padding: 10px;
            border-radius: 5px;
            position: absolute;
            top: -1000px;
            font-size: 14px;
         `;
         document.body.appendChild(dragImage);
         
         event.dataTransfer.setDragImage(dragImage, 50, 20);
         event.dataTransfer.setData("text/plain", "custom-item");
         
         // Clean up the temporary image after a short delay
         setTimeout(() => document.body.removeChild(dragImage), 0);
      };

      customDrop.ondragover = function(event) {
         event.preventDefault();
         event.target.style.backgroundColor = "#e8f5e8";
         event.target.textContent = "Release to drop";
      };

      customDrop.ondragleave = function(event) {
         event.target.style.backgroundColor = "#f9f9f9";
         event.target.textContent = "Drop here";
      };

      customDrop.ondrop = function(event) {
         event.preventDefault();
         event.target.style.backgroundColor = "#c8e6c9";
         event.target.textContent = "Item dropped successfully!";
      };
   </script>
</body>
</html>

AmitDiwan

Updated on: 2026-03-16T21:38:54+05:30

324 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next