Drag and Drop in HTML5

HTML5 has introduced 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 few lines of scripting language we can implement this feature. HTML5 has introduced 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 below source code i have implemented the Drag and Drop Feature. 
 
 
 
With the help of above source the smaller box can be dragged and dropped into larger box.
 

Thanks for reading. 
Ebook Download
View all
Learn
View all