Mobile Web

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.

To use drag and drop in a Tizen device, long-press the draggable element. When the context menu appears, select the Drag menu.
Go to top