Drag-and-Drop

Course- HTML5 >

The ability to drag-and-drop elements; thereby, aiding in transfer of data, was done by complex JavaScript code prior to HTML5. However, with the advent of the drag-and-drop in HTML5, it has become much easier for the browsers to adopt this new feature.

EXAMPLE:

<!DOCTYPE HTML>
<html>
<head>
<style type = "text/css">
#fstrd1, #fstrd2
{float:left; width:85px; height:35px; 

margin:11px;padding:11px;border:3px solid navy;}
</style>
<script>
function dropItem(ev) { ev.preventDefault();
}
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) { ev.preventDefault();
var abc = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(abc));
}
</script>
</head>
<body>
<div id = "fstrd1" ondrop = "drop(event)" ondragover = "dropItem(event)">
<img src = "fstrd.png" draggable = "true"
ondragstart = "drag(event)" id = "drag1" width = "75" height = "39"></div>
<div id = "fstrd2" ondrop = "drop(event)" ondragover = "dropItem(event)"></div>
</body>
</html>

OUTPUT:

HTML5 DRAG AND DROP

If we place the mouse on the FASTREAD logo and drag it to the adjoining box, the transfer of data will take place; thereby, displaying the following screenshot:

DRAG AND DROP

The FASTREAD logo can be moved back and forth between the two boxes by using the drag-and-drop feature.

Let's look at the code explanation to understand how it all works.

The draggable when set to the true feature enables the item to be dragged from its current state.

The value and type of the data to be dragged is set by the dataTransfer.setData

method.

By default, the dragged item cannot be dropped elsewhere. Hence, we use the event.preventDefault() feature, as it allows the item to be dropped into another element.

The dataTransfer.getData method will enable us to return any data that was deined in the dataTransfer.setData method. Then, we append the dragged item to its destination.

Now, that you understand how the code works, let's look at the various attributes that can be used in the Drag and Drop API.

To understand the attributes better, we will look at the events being Fired while the

data is being dragged, and when the data is being dropped.

While the data item is being dragged, the following attributes come into picture:

dragstart
drag
dragend

Let's look at these attributes and understand their functionality.

The dragstart event is ired when we place the mouse over a data item, and then try to drag the item. We have used the ondragstart event handler to demonstrate it. The drag event gets ired after that as the item is in the process of being dragged. Finally, when the item is to be dropped, the dragend event gets fired.

Let's look at the following events being ired when the item is to be dropped:

dragenter
dragover
dragleave
drop

When the dragged item is in the boundaries of the drop target, the dragenter event is fired. Immediately, the dragover event is fired as soon as the dragenter event is fired. We need to understand that these events happen when the data item is within the boundaries of the drop target. However, as soon as we drag the item outside the boundaries of the target, the dragleave element is fired. If we decide to drop the data item in the drop target, then the drop event is fired instead of the dragleave event.

Now that we have understood how the events are fired and the intricacies of the procedure, we will now look at why the drag-and-drop API is so useful.

The drag-and-drop feature not only assists in moving an object, but also assists in transfer of data within various applications and different frames. All the latest versions of Firefox, Google Chrome, and Opera support this feature. Internet Explorer 10 (IE10) supports this feature completely.

PRV MENU NEXT

Drag-and-Drop

Latest Post