The HTML5 dataTransfer object is part of drag and drop feature in HTML5. It is the main object that holds information about object being dragged and dropped. Moreover, it is available to every single drag and drop event in HTML5.

In order to retrieve dataTransfer object we need to handle drag event. The following code shows you how it is done in HTML5.

The HTML5 dataTransfer is used to set and obtain the drop data during communication between target and source. There are several functions and properties available as a part of the HTML5 dataTransfer object.

<script>

function handleDragEvent(evt)

{

    var myTransferObject = evt.dataTransfer;  

}

</script>

• setData(format, data) – registers data with MIME type
• getData(format) – allows for data retrieval
• clearData() – clears out all data
• setDragImage(element, x, y) – commands browser to use existing image. X and y are coordinates of the drop location
• addElement(element) – commands browser to draw element as a drag image
• types – array of all registered formats
• items – list of items and their formats
• files – file associated with the drop
• effectAllowed – commands browser to use only listed commands. This property can be set to: none, copy, copyLink, copyMove, link, linkMove, move, or all
• dropEffect – determines operation currently being executed