Answer: Dragging and Dropping Data Using DHTML / HTML5

1. Introduction

Drag and Drop (DnD) is an interactive user interface feature in DHTML/HTML5 that allows a user to click and hold the mouse button over an element, drag it across the screen, and release (drop) it onto a designated target container.

+-------------------+                                       +-------------------+
|  Draggable Source |                                       |    Drop Target    |
|   (Item Box)      |                                       |     (Bucket)      |
+---------+---------+                                       +---------+---------+
          |                                                           |
          | 1. ondragstart                                            |
          |    (dataTransfer.setData('text', id))                     |
          |==================== [User Drags Item] ===================>|
          |                                                           |
          |                                                           | 2. ondragover
          |                                                           |    (event.preventDefault())
          |                                                           |
          |                                                           | 3. ondrop
          |                                                           |    (dataTransfer.getData('text'))
          v                                                           v

2. The Drag and Drop Event Cycle

A. Events on the Draggable Source:

dragstart: Fires when the user begins dragging the element. Used to populate the dataTransfer payload.
drag: Fires continuously while the element is being dragged.
dragend: Fires when the drag operation completes (released or cancelled).

B. Events on the Drop Target:

dragenter: Fires when the dragged item enters the drop zone boundary.
dragover: Fires continuously while the dragged item hovers over the drop zone. Must call event.preventDefault() to allow dropping.
dragleave: Fires when the dragged item leaves the drop zone boundary.
drop: Fires when the dragged element is released onto the drop target.

3. The `DataTransfer` Object

The event.dataTransfer object holds the payload transferred during the drag operation:

setData(format, data): Sets the drag data and MIME type (e.g., event.dataTransfer.setData("text/plain", e.target.id)).
getData(format): Retrieves the stored data during the drop event.

4. Complete Working DHTML Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DHTML Drag and Drop Demo</title>
  <style>
    body { font-family: Arial, sans-serif; }
    
    .container { display: flex; gap: 30px; margin-top: 20px; }

    /* Drop Zone Containers */
    .drop-box {
      width: 220px;
      min-height: 220px;
      padding: 15px;
      border: 2px dashed #5b6472;
      background-color: #f5f6f2;
      border-radius: 8px;
    }

    .drop-box.hovered {
      border-color: #b23a2e;
      background-color: #efe9de;
    }

    /* Draggable Item */
    .drag-item {
      padding: 12px;
      margin: 8px 0;
      background-color: #1f4b43;
      color: #ffffff;
      font-weight: bold;
      border-radius: 4px;
      cursor: grab;
      text-align: center;
    }

    .drag-item:active {
      cursor: grabbing;
      opacity: 0.6;
    }
  </style>
</head>
<body>

  <h2>DHTML Drag and Drop Data Demo</h2>
  <p>Drag items between Box A and Box B:</p>

  <div class="container">
    <!-- Box A -->
    <div id="boxA" class="drop-box" ondragover="allowDrop(event)" ondrop="handleDrop(event)" ondragleave="removeHover(event)">
      <div id="item1" class="drag-item" draggable="true" ondragstart="handleDragStart(event)">
        Item 1: JavaScript
      </div>
      <div id="item2" class="drag-item" draggable="true" ondragstart="handleDragStart(event)">
        Item 2: HTML5 & CSS3
      </div>
    </div>

    <!-- Box B -->
    <div id="boxB" class="drop-box" ondragover="allowDrop(event)" ondrop="handleDrop(event)" ondragleave="removeHover(event)">
      <div id="item3" class="drag-item" draggable="true" ondragstart="handleDragStart(event)">
        Item 3: Java Servlets
      </div>
    </div>
  </div>

  <script>
    // 1. Drag Start: Store element ID in dataTransfer
    function handleDragStart(event) {
        event.dataTransfer.setData("text/plain", event.target.id);
        event.dataTransfer.effectAllowed = "move";
    }

    // 2. Drag Over: Must preventDefault to permit dropping
    function allowDrop(event) {
        event.preventDefault();
        event.currentTarget.classList.add("hovered");
    }

    function removeHover(event) {
        event.currentTarget.classList.remove("hovered");
    }

    // 3. Drop: Retrieve element and append to new parent
    function handleDrop(event) {
        event.preventDefault();
        event.currentTarget.classList.remove("hovered");
        
        const draggedElementId = event.dataTransfer.getData("text/plain");
        const draggedNode = document.getElementById(draggedElementId);
        
        if (draggedNode && event.currentTarget.classList.contains("drop-box")) {
            event.currentTarget.appendChild(draggedNode);
        }
    }
  </script>

</body>
</html>