HTML Drag and Drop API

    In HTML5 we have a new API, that can be used to drag and drop any HTML element within the same web page. And the location of the drag element and drop is specified using this API.

    Drag and Drop

    Using this API, we can easily grab an HTML object and drag it to a specified location within the webpage. It makes the page more interactive and fun; however, you do not find regular web pages using this API.

    Example 

    <!DOCTYPE HTML>
<html>
<head>

<script>
 function allowDrop(ev) 
  {
  ev.preventDefault();
  }

  function drag(ev) {
   ev.dataTransfer.setData("text", ev.target.id);
   }

 function drop(ev) {
   ev.preventDefault();
   var data = ev.dataTransfer.getData("text");
   ev.target.appendChild(document.getElementById(data));
   }
</script>
</head>
<body>

<p>Drag the Image into Box:</p>

<div 
style ="width:350px; height: 70px; border: solid black" 
ondrop="drop(event)" ondragover="allowDrop(event)">

</div>
<br>
 <img id="drag1" src="img.png" 
 draggable="true" ondragstart="drag(event)" 
 width="336" height="69">

</body>
</html>

    Break The code

    The API is written using JavaScript and events. Let's break the code to make more sense of it.

    Draggable Element

    First, we need to make an element draggable. In the above example, we used the Attribute draggable and made the <img> element draggable. 

    <img id="drag1" src="img.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

    What should happen when the element is dragged

    In the above example, inside the <img> element, we have used the ondragstart attribute to specifies a JavaScript function drag(event) that called when the user drags the element. The function drag(ev) set the data type and value of the dragged element, and in our example, the data type of the element is an image.

    Example 

    <img id="drag1" src="img.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

function drag(ev) 
   { 
    ev.dataTransfer.setData("text", ev.target.id); 
   }

    Set the Drop Location

    Using the ondragover attribute we see the drop location for the element. In the above example, we have used an <div> element for the drop location. The ondragover element specifies a JavaScript function that allows the dragged element to drop. 

    <div style ="width:350px; height: 70px; border: solid black" ondrop="drop(event)" ondragover="allowDrop(event)">

</div>

 function allowDrop(ev) 
  { 
   ev.preventDefault();
  }

    ondrop Attribute

    When the element is dropped at the dropped location, then a drop event occurs by default. To manipulate that event we use the ondrop Attribute and call the JavaScript drop(ev) function. 

    <div  style ="width:350px; height: 70px; border: solid black"  ondrop="drop(event)"  ondragover="allowDrop(event)">  
</div> 
function drop(ev) 
{ 
ev.preventDefault(); 
var data = ev.dataTransfer.getData("text"); 
ev.target.appendChild(document.getElementById(data)); 
​​​​​​​}

    Summary

    • In HTML5, we can use the Drag and Drop API to drag and drop any element within the webpage.
    • All the latest web-browser versions support it.
    • The API is written in JavaScript.
    • To make an element draggable, we need to mention the draggable Attribute within the element.
    Previous Tutorial Next Tutorial