HTML Drag and Drop

 HTML Drag and Drop

HTML5 provides a built-in API for implementing drag and drop functionality on web pages. This allows users to drag elements on the page and drop them in a different location or onto a different element.

Here's an example of implementing drag and drop using HTML5:

html

<div id="dragme" draggable="true">Drag me</div>

<div id="drophere">Drop here</div>

<script>

var dragme = document.getElementById("dragme");

var drophere = document.getElementById("drophere");

dragme.addEventListener("dragstart", function(event) {

  event.dataTransfer.setData("text", event.target.id);

});

drophere.addEventListener("dragover", function(event) {

  event.preventDefault();

});

drophere.addEventListener("drop", function(event) {

  event.preventDefault();

  var data = event.dataTransfer.getData("text");

  event.target.appendChild(document.getElementById(data));

});

</script>

In this example, the draggable="true" attribute is added to the "dragme" element to make it draggable. The dragstart event is then used to set the data that will be transferred when the element is dropped. The dragover event is used to prevent the default behavior of the browser when an element is dragged over another element. Finally, the drop event is used to retrieve the data that was set during the dragstart event and append it to the "drophere" element.