Drag and Drop in HTML5

Drag and Drop in HTML5  

 
HTML5 has introduced a new feature of “Drag and Drop” elements. Earlier this feature needs to implement using scripting language and third party plugin but in HTML5 with just a few lines of scripting language, we can implement this feature. HTML5 has introduced a number of events to support this feature.
 
The different events used or drag and drop process are:
  • dragstart
  • drag
  • dragenter
  • dragleave
  • dragover
  • drop
  • dragend
In the below source code I have implemented the Drag and Drop Feature. 
 
s 
 
With the help of the above source, the smaller box can be dragged and dropped into a larger box.
 
a
Thanks for reading.