How to implement DRAG AND DROP feature using HTML5

 There is no doubt that HTML5 is making life easy and fast for web developers. With its new attributes for elements, HTML5 is a boon of the decade. In this tutorial we will learn about one of the most useful feature of HTML5, that is drag and drop method and how to implement it.

 

 

 

DEMO

First have a look at demo,

Drag and Drop Example

Here is a list of online users, drag the users to list them as friends or others

ONLINE USERS
User1
User2
User3
User4
FRIENDS
OTHERS

 

 

 

 

 

 

 

 

Download Link to demo

How to implement this?

We are going to use draggable attribute of HTML5. If we set the attribute draggable="true" then that particular element becomes draggable. You can even drag canvas elements. Easy, isn't it? 

Suppose, we want to drag User1, so all we need to do is define its html attributes  [as given below].

<div draggable="true" id="user1" class="user" ondragstart="drag(this, event)">User1</div>

Here, ondragstart is the event which comes into effect when user starts dragging a selected HTML.

 Next, we need to define a valid drop-target,

<div id="friends" class="friends" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false">FRIENDS</div>

Lets take all events one by one,

 

  • ondrop-This event is fired when dragged  element is dropped on valid-drop target.
  • ondragenter-This event is fired when user drags mouse pointer into valid-drop target.
  • ondragover-This event fires continuously while the cursor is on the target area in a drag-and-drop operation.

Here, ondragenter="return false" and ondragover="return false" prevents the default browser action.

 Now, we are left with defining javascript functions 'drag' and 'drop', so let define these two js funtions.

function drag(target, e) {

e.dataTransfer.setData('Text', target.id);

}

function drop(target, e) {

var id = e.dataTransfer.getData('Text');

target.appendChild(document.getElementById(id));

e.preventDefault();

e.dataTransfer.setData('Text', target.id)Sets the data that can be shared between the draggable node and the drag target.Here, it is sharing drag-target's id having data type 'Text'.

As obvious from the name e.dataTransfer.getData('Text') is used to get the value of set data.

e.preventDefault()-prevents the default action of browser.

Thats it. We are done. Below is the complete HTML code.

CODE

<!DOCTYPE html> 

<html> 

<head> 

<title>HTML5 Drag and Drop</title> 

<style type="text/css"> 

#onlineusers{

width:200px;

height:200px;

left: 0px;

border: 2px solid;

position:absolute;

font-weight:bold;

}

.friends {

width:200px;

height:200px;

left: 200px;

border: 2px solid;

position:absolute;

font-weight:bold;

}

.others {

font-weight:bold;

width:200px;

height:200px;

left: 400px;

border: 2px solid;

position:absolute;

}

.user {

width:150px;

height:30px;

float:left;

margin-left:10px;

margin-top:10px;

border: 2px dashed;

}

#user1

background-color:#28ba88;

}

#user2

background-color:#ec8c8c;

}

#user3

background-color:#d1bded;

}

#user4

background-color:#eae822;

}

</style> 

</head> 

<body> 

<h1>Drag and Drop Example</h1> 

<p>Here is the list of online users, drag them to list them as friends or others</p> 

<div id="onlineusers" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false">ONLINE USERS

<div draggable="true" id="user1" class="user" ondragstart="drag(this, event)">User1</div>

<div draggable="true" id="user2" class="user" ondragstart="drag(this, event)">User2</div>

<div draggable="true" id="user3" class="user" ondragstart="drag(this, event)">User3 </div>

<div draggable="true" id="user4" class="user" ondragstart="drag(this, event)">User4</div>

</div>

<div id="friends" class="friends" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false">FRIENDS</div>

<div id="others" class="others" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false">OTHERS</div> 

<script type="text/javascript">

function drag(drop_target, e) {

e.dataTransfer.setData('Text', drop_target.id);

}

function drop(drop_target, e) {

var id = e.dataTransfer.getData('Text');

drop_target.appendChild(document.getElementById(id));

e.preventDefault();

</script> 

</body> 

</html>