Exploring the Drag and Drop Function in HTML5

In the above example to make the element drag able ‘true’ attribute is used. If you want to make these elements not drag-able then ‘false’ value is used to disable the drag function.

But this is not the case with the XUL elements. They are all drag-able and there is no need to use drag-able attribute.

 

Type and Format

There are two things to be added in the code when beginning a drag and drop function and those are ‘type’ and ‘format’. Popular types are ‘text/plain’ and ‘img/jpg’. ‘text/plain’ is the modern and most suitable text type when the dragged data is a text. It is used for most of the text types but if you need to be more specific other types can be used as well. The other thing which is to be added in while doing the drag operation is the drop event. It defines where this drag data would be dropped. While in a drop event the drop listener will recover the data and place it where it is defined to be replaced.

 

SetData

‘SetData’ is used to define the value and the format of the dragged content. Following is the simple example to set the value and format of the dragged data.

In the case of a link to be dragged the code will look like this.

event.dataTransfer. setData(“text/uri-list”, “ https://www.htmlgoodies.com”)

 

Data Transfer

Data transfer is the property to hold the data that is being dragged. An association of the data should be made to Data Transfer. A developer has to define the association of the data directly to the data transfer. For example if only the link has to be dragged and not the box around it, then the association will be made to the link or URL  itself.

 

Drag Translucent Image

We have already seen that when an image or text is dragged on a web page a translucent image shows in the back making the selected data transparent. There is no need to set it that way because in HTML5 it is done by default. But if you want to change it or set a customized back image then it has to be included in the code. “setDragImage() is used for a customized back image.

event.dataTransfer.setDragImage(image, xOffset, yOffset)

 

Drag Effects

Dragging a data holds multiple functions in itself. Using the ‘copy’ attribute define where the data that is being dragged should be dropped. It defines the location of the drop event. Other operations that are involved are ‘move’ and ‘link’ which indicates what will be moved and ‘link’ shows the connection between the source and the dropped location. All these functions add up to the effects of the drag and drop function. ‘effectAallowed’ is used to indicate what kind of effect will be used in data transfer event.

 

event.dataTransfer.effectAllowed = “link”;

 

In the above example the ‘link’ value is selected. However, multiple values can be added to enhance the effect. The combination values can also be used like ‘copyMove’ , ‘moveLink’. All is used when all the effects are used in ‘effectAllowed’.

 

Drop Target

To drop a target the location is specified. There are many places on the web page where a dragged image cannot be dropped. So, a valid location should be specified. If you want to drop a data on an invalid location then default settings has to be changed either by ‘false’ attribute or by ‘event.preventDefault’ attribute event listener. The code will be like this:

 

Most of the time ‘returnfalse’ is used to drop data but when some more specific data has to be dropped then ‘event-preventDefault’ is more suitable to use.

This article gives just a basic insight into the drag and drop function in HTML5. However, this function has much more to offer and holds multiple functionalities in to it.