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 othersONLINE USERS User1User2User3User4FRIENDSOTHERSfunction 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(); }
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>