The Use Of Data Transfer API In A Drag And Drop Project

The Data transfer API is a part of HTML5 Drag and Drop API and Clipboard events. It is used for interactions within a page and can be used to transfer data from the starting point(where the item is dragged from) to the endpoint(where the item is dropped).

The Data transfer API has 2 methods:

1. datatransfer.setData()
2. datatransfer.getData()
3. datatransfer.addElement()
4. datatransfer.clearData()
5. dataTransfer.setDragImage

In firefox browsers, there are customary methods for the Data transfer API. It includes:

1. moz.setDataAt()
2. moz.getDataAt()
3. moz.clearDataAt()
4. moz.TypesAt()

DataTransfer.setData()

When the dragStart event is called, this method can be used to set the data to the specified data and type. It accepts 2 parameters, a string representing the type of data to add to the drag object and a string representing the data to add to the drag object.

dataTransfer.setData(format, setData)

DataTransfer.getData()

This method retrieves drag data for a specified type. It accepts only one parameter and it is used with the following drag events: dragenter(), dragover(), dragleave(), drop(). The dragged data can not be retrieved by the source element.

dataTransfer.getData(format)

DataTransfer.addElement()

This method sets an element as a drag source. The element is added when the drag event and the dragend event is fired.

dataTransfer.addElement()

DataTransfer.clearData()

This method removes the data for a given type and can only be called when the dragstart event is fired. It has one optional parameter and if that parameter is specified, then only that type of data is removed else all the data types are removed.

DataTransfer.setDragImage()

By default, an image is created from the drag target when the dragstart event is fired but a custom image can be created by using this method. It accepts 3 parameters: the image element, the horizontal offset, the vertical offset.

dataTransfer.setDragImage(imgElement, xOffset, yOffset)

Properties Of The Data Transfer API

1. dropEffect
2. effectAllowed
3. files
4. types

Some specific properties in firefox browser includes:

1. mozCursor
2. mozItemCount
3. mozSourceNode
4. mozUserCancelled

DropEffect

This property specifies the type of drag and drop operation that is allowed and if the type of drag and drop operation isn't allowed, the dragged content won't be dropped. The value of the drop effect property also affects the style of the displayed cursor. The allowed types of transfer is specified in the dragstart event and modified in the dragenter and dragover event.

EffectAllowed

This property specifies the effect that is allowed during a drag and drop operation. This property should be set in the dragstart event to set the desired drag effect for the drag source. Within the dragenter and dragover event, this property will be set to whatever value was assigned during the dragstart event.

Files

The file property is a list of the files in the drag operation.

Types

This property returns a list collection that contains the available data formats for the first item of the current drag and drop operation.

Summary

For a clearer explanation on the Data Transfer API, see HTML Drag and Drop API.