How to do Drag and Drop feature using HTML5 API?

Drag and Drop feature implementation

We should use html event attributes like ondragover, ondrop and ondragstart to achieve drag and drop feature.

HTML5:


<div draggable = "false">
<!-- ondragover event: Specifies where the dragged data can be dropped -->
<!-- ondrop event: When the dragged data is dropped, a drop event occurs -->
<div id="div1" 
             style="width: 300px; height: 300px; padding: 10px; border: 1px solid #FF4500;"
             ondragover="allowDrop(event)" 
             ondrop="drop(event)"
             draggable = "false">
</div>
<!--ondragstart = Specify what should happen when the element is dragged -->
<img 
             id="drag1" src="HTML5.jpg" 
             draggable="true" 
             ondragstart="drag(event)" 
    width="204" height="204" />
</div>

Script:


        function drag(event){
         // set the target element
            event.dataTransfer.setData("ControlID", event.target.id); 
        }
        function allowDrop(event){
            //To allow a drop, we must prevent the default handling of the element
            event.preventDefault();
        }
        function drop(event){
            //To allow a drop, we must prevent the default handling of the element
        event.preventDefault();
         // append drag element in to drop area
            var controlId = event.dataTransfer.getData("ControlID");
            event.target.appendChild(document.getElementById(controlId));
        }

Explanation:

  • ondragover event: It specifies when an element is dragged over a drop target.
  • ondrop event: When the dragged data is dropped, a drop event occurs.
  • Ondragstart: It specify what should happen when the element is dragged.
  • event.preventDefault() – Prevent the default behavior of an element.
Continue Reading