HTML Drag and Drop API

The HTML Drag and Drop API is a set of events, attributes, and methods provided by web browsers to enable the creation of interactive and user-friendly drag-and-drop interfaces in web applications. This API allows users to click and drag HTML elements across the page and drop them onto designated areas or targets.

Here's a basic overview of how the HTML Drag and Drop API works:

Drag Events:

dragstart: This event is triggered when the user starts dragging an element. You can use this event to set the data that will be transferred during the drag operation.
drag: This event is fired continuously as the dragged element is moved.
dragend: This event is triggered when the user releases the dragged element.

Drop Events:

dragenter: Fired when a dragged element enters a valid drop target.
dragover: Fired when a dragged element is over a valid drop target. This event needs to be canceled to allow a drop.
dragleave: Fired when a dragged element leaves a valid drop target.
drop: Fired when the user releases the dragged element over a valid drop target. This is where you handle the drop action.

Data Transfer:

The dataTransfer object is used to pass data between the drag source and the drop target. You can use methods like setData to set data during the dragstart event and getData to retrieve the data during the drop event.

Here's a simple example demonstrating the HTML Drag and Drop API:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop Example</title>
    <style>
        #drag-source {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 20px;
            cursor: move;
        }

        #drop-target {
            width: 200px;
            height: 200px;
            background-color: lightgreen;
            margin: 20px;
        }
    </style>
</head>
<body>

    <div id="drag-source" draggable="true" ondragstart="drag(event)">Drag me</div>
    <div id="drop-target" ondragover="allowDrop(event)" ondrop="drop(event)">Drop here</div>

    <script>
        function drag(event) {
            // Set the data to be transferred during the drag operation
            event.dataTransfer.setData("text/plain", "Hello, Drag and Drop!");
        }

        function allowDrop(event) {
            // Prevent the default behavior to allow a drop
            event.preventDefault();
        }

        function drop(event) {
            // Prevent the default behavior to allow a drop
            event.preventDefault();

            // Get the data from the drag source
            var data = event.dataTransfer.getData("text/plain");

            // Display the data in the drop target
            event.target.innerHTML = data;
        }
    </script>

</body>
</html>

You can click on above box to edit the code and run again.

Output

Browser Support

The numbers in the table specify the first browser version that fully supports Drag and Drop.

API	Drag and Drop
	4.0
	3.5
	9.0
	12.0
	6.0

Where to Drop - ondragover

The ondragover event is used to specify the behavior that should occur while an element is being dragged over a valid drop target. This event is crucial for enabling the drop target to accept the dragged element.

Here's an example of how to use ondragover in the HTML Drag and Drop API:

Example

event.preventDefault()

You can click on above box to edit the code and run again.

Output

Do the Drop - ondrop

Yes, the ondrop event is used to handle the drop action. It occurs when the dragged element is released over a valid drop target. The ondrop event handler is responsible for specifying what should happen when the drop occurs.

Here's an example of how to use ondrop in conjunction with the HTML Drag and Drop API:

Example

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

You can click on above box to edit the code and run again.