HTML5 Drag and Drop API Tutorial

There has been a lot of confusions about HTML5 drag and drop api uses and its events. HTML5 drag and drop API is not as difficult as it seems. In this article first I will drive you through browser behavior before the arrival of HTML5 drag and drop api and then I will get into drag and drop api.

Default Drag and Drop Behavior of Browsers

These are the default drag and drop functionality provided by every browser:

1. img elements can be dragged and dropped into address bar, desktop and input(type file) element.
2. selected text can be dragged and dropped into address bar, desktop and textarea element.
3. anchor elements can be dragged and dropped into address bar and textarea element.
4. files from desktop can be dragged and dropped into input(type file) element.

user-drag CSS property by webkit browser

This property was introduced by webkit browsers(safari and chrome) to make any element draggable or not draggable. The drop functionality was built into browsers. You can alter the above functionality using this CSS property. This property was introduced before HTML5 drag and drop property came into existence.

This property can take three different values:

• “none” makes the element non-draggable.
• “element” makes the element draggable but the content inside the element is not draggable.
• “auto” is the default drag of the element kind. This is the default value.

This CSS property is not available in other browsers.

HTML5 Drag and Drop API

HTML5 Drag and Drop API is one of the most important features that made HTML5 so popular today. Its allows us to build native drag and drop UI rich web apps. It allows developers so create games, shopping carts, website builders etc. Let’s see the API in depth.

HTML5 draggable attribute

Its the most basic part of drag and drop API. You can make any element draggable by setting this attribute of that element to true. By setting this attribute to false any element can be made non-draggable.

In webkit browsers this attribute can be overridden by user-drag CSS property. In webkit browsers make sure a element is draggable using both ways. For HTML5 drag and drop API to work on an element they element must be draggable using the draggable attribute.

The draggable attribute is true for element that provides default browser drag and drop functionality as explained above.

Drag and Drop Events

There are 7 events that occur during drag and drop operation. dragstart, drag and dragend events are fired on the dragged object. dragenter, dragover, dragleave and drop events are fired on the target element(on which the dragged element will be dropped).

dragstart Event

This event is fired when a draggable element is dragged.

drag Event

This event is fired every time the mouse is moved while the object is being dragged.

dragend Event

This event is fired when the user releases the mouse button while dragging an element.

dragenter Event

This event is fired when the mouse is moved over the target element while a drag is occurring.

dragover Event

This event is fired whenever the mouse is inside the target zone while dragging an element.
The listener attached to the target element should indicate weather a drop is allowed or not. If there is no listeners or else if listener is not preventing the the browser default action then drop is not allowed by default.

dragleave Event

This event is fired when the mouse is moved out of the target element while a drag is occurring.

drop Event

This event is fired when the mouse button is released while moving on the target element.

event.dataTransfer Property

Every drag and drop event listener has a Event object passed as argument to it. This Event object has a dataTransfer property assigned to DataTransfer object. event.dataTransfer property is the heart of drag and drop API. This object has several methods and properties.

Properties of dataTransfer Object

It has four different properties.
dropEffect
We can read and write this property. Its set to the type of cursor displayed while dragging an element. The target element needs to set this property during dragover event. Its assigned to one of the following strings “copy”, “move”, “none” and “link”. If not assigned default value is “none”.

effectAllowed
We can read and write this property. Its set to the allowed drop effects during dragging of an element. This property is usually set by the source element during the dragstart event. Its assigned to one of the following strings “copy”, “move”, “link”, “copyLink”, “copyMove”, “linkMove”, “all” and “none”. If not assigned default value is “all”.

files
This is a readonly property. Returns a FileList of the files being dragged. This is useful when user drags a file from desktop to the drop zone.

types
Holds a list of format types of the data that is stored using setData method of this object.

Methods of dataTransfer Object

There are four different methods.
setData(format, data)
Whenever you drag an draggable element a storage area is created to pass data between the source and target. We can add data to the storage area using this method. First parameter is the MIME type and the second parameter is the data itself. This is used by the source element.
Here format is the key and data is the value. We can have multiple key-value pairs.

getData(format)
This function is used to retrieve the stored data. Used by the target.

clearData( [ format ] )
This function is used to clear the specified MIME type data. If no parameter is provided then all keys are deleted.

setDragImage(element, x, y)
Whenever a drag an element, browser creates a ghost image of that element for better user experience. We can change that ghost image using this method. This method is used by the source element.

Conclusion

I covered all the details of Drag and Drop API. Thanks for reading. Please share this article.