HTML5 Drag and drop

This feature is supported in mobile applications only.

HTML5 drag and drop activates through event-based JavaScript and added attributes.

The main features of the HTML5 Drag and drop API include:

• Using drag and drop

  To make an element draggable, add the draggable="true" attribute to it. Only elements thus defined as draggable can generate drag and drop events.

  A drag and drop requires a source, target, and data. It is used through the following events:

  • dragstart
  • drag
  • dragleave
  • dragenter
  • dragover
  • drop
  • dragend

  The dragstart and drop events send data through the DataTransfer interface.

• Transferring data

  You can transfer data from the drag source to the drop target. The DataTransfer interface instance receives the dragstart event and fills itself with the data to be transferred. It then receives a drop event, and puts the data into the drop target.