HTML5 dataTransfer object

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