What You Should Know About HTML5 Drag and Drop

The drag and drop feature is one of the interactions that can promote usability of your website. There are numerous frameworks that can be used to develop the drag and drop interfaces. However, what most web developers don’t understand is that all the modern web browsers—that supports HTML5— have native supports that can implement drag and drop.

In “What You Should Know about HTML5 Drag and Drop” we explore how to make use of HTML5 drag and drop during web development. Let’s get started.

How to make HTML5 elements draggable

To make HTML5 elements draggable, we use the draggable attribute. When the draggable attribute set to true value, the browser will automatically tell that the element is draggable. Here’s an example:

<div draggable=“true”>
this is an instance of draggable Division</div>

The above HTML5 code tells the browser that whatever element is placed between the <DIV> and </DIV> tags can be dragged and dropped.

Some HTML elements such as the <A> and <IMG> are draggable by default in most browsers. However, it’s a good practice to explicitly specify whether the element is draggable or not.

Which events are started during the drag and drop interactions?

Well, a couple of events will be initiated by the browser during a drag interaction. Some of the events will be initiated on the HTML element that is being dragged while others will be fired on HTML elements that on the web page that serves as the drop targets. Below are examples of events that are fired up during the dragging process:

* dragstart. it’s started on an HTML element by the user. It can’t be initiated when dragging a file into the browser.
* drag. It is continuously started on the element that’s being dragged during the interaction.
* dragenter. It’s fired the moment the dragged element enters the target element.
* dragleave. It’s fired the moment the dragged element leaves the target element.
* drop. It is fired when the dragged HTML element or file is dropped.
* dragend. It’s started when the moment the drag interaction has been completed.

Properties of the Data Transfer Object

The drag interaction generates a data transfer object that’s used to store all the information about the drag interaction. Here’s what you should know concerning properties of the data transfer object:

* DropEffect. This property is used to determine which cursor the browser should display when dragging. Its possible values are: copy, move and link.
dataTransfer.dropEffect [ = value ]
* EffectAllowed. It assumes the following values: copy, move, link and copyLink. It indicates which types are allowed for the drag interaction.
dataTransfer.effectAllowed [ = value ]
* Files. It defines the file objects that are associated with the dragging process.
dataTransfer.files
* Types. It defines the format types for the data which is stored in the DataTransfer object.
dataTransfer.types

Now that we’ve learnt the basic requirements for drag and drop interaction in HTML5, let’s see a quick process in action.

Copy and paste the HTML5 code below in your favorite editor. Save as “.html” file and open it in your browser.

<! DOCTYPE html>

<html>

<head>

<title></title>

<style>

      #source, #source1, #source2 {color: blue;}
      #target {border: 1px solid black; padding: 2em;}

</style>

<script>

function dragstart_handler(ev) {

 ev.dataTransfer.setData("text", ev.target.id);
 ev.dataTransfer.effectAllowed = "move";

}

function drop_handler(ev) {

 ev.preventDefault();
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));

}

function dragover_handler(ev) {

 ev.preventDefault();
 ev.dataTransfer.dropEffect = "move"

}

</script>

</head>

<body>

<div id="source" ondragstart="dragstart_handler(event);" draggable="true">Fruits</div>
<div id="source1" ondragstart="dragstart_handler(event);" draggable="auto">Alcohol</div>
<div id="source2" ondragstart="dragstart_handler(event);" draggable="false">Foods</div>

<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop all your elements here</div>

</body>

</html>