Exploring the Drag and Drop Function in HTML5

By Kashif Nazir

Though, it is interesting that in the earlier versions of HTML, this element was not included. Drag and drop functionality in HTML5 can now be used in making diagrams, managing files and just about every other standard drag and drop functionality. In HTML5 this native drag and drop functionality is not limited to the mouse events but rather it is more advanced when it is integrated in managing files on the developer’s end. Drag and drop element works differently in HTML5.

 

There are many drawbacks and short comings in using this functionality in other development and code versions. A notable drawback is that ad hoc drag and drop functionality cannot be mixed with other content on the same web page unless both commands are integrated into your code first. This random mixing will lead to havoc on the web page. Another, major drawback of ad hoc drag and drop is that it does not allow the user to use it on the desktop and does not work in Windows.  In HTML5 each of these problems have been taken care of providing a problem free framework for drag and drop API as well as faster web apps. HTML5 drag and drop functionality resembles the Java API and MFC. Developers who have already worked with these APIs can easily understand the drag and drop API in HTML5.

 

Draggable=’true’

Dragging an object in HTML5 can be done following simple and easy steps. Draggable ‘true’ attribute is used to drag the required content. Just about everything is drag able in HTML5, this includes links images and files. Dragging an image attribute will look like this

 

<img draggable= “true”>

When we set an image or link as drag-able, we have to put its URL in the code to allow this feature. The text content can be integrated in to the code itself. But the links, images are by default and can be dragged in HTML5. To make other elements drag-able in HTML5 through the same ‘true’ attribute. But the one thing to be done is adding a listener in the ‘dragstart’. The following example explains how to include other data to be dragged.

< div draggable= ”true”ondragstart=“event.dataTransfer.setData(‘text/plain’’, ‘ This is the content that is being dragged”>

This is the content that is being <strong> dragged </strong>.

</div>

 

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.

<button label = “This is the XUL element” ondragstart= “event.dataTransfer.setData(‘text/plain’, This is the XUL element button’);”>

 

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”, “ http://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:

<div ondragover="return false">

<div ondragover="event.preventDefault()">

 

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. 



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date