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.


    function handleDragEvent(evt)


                var myTransferObject = evt.dataTransfer;  



  • 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

Featured pages


Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …


Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…


 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …