Using Native Drag and Drop in HTML 5 pages
This is going to be the eighth post in a series of posts regarding HTML 5. You can find the other posts here, here , here , here, here , here and here.
In this post I will show you how to implement Drag and Drop functionality in an HTML 5 page using JQuery.This is a great functionality and we do not need to resort anymore to plugins like Silverlight and Flash to achieve this great feature. This is also called a native approach on Drag and Drop.
I will use some events and I will write code to respond when these events are fired.
As I said earlier we need to write Javascript to implement the drag and drop functionality. I will use the very popular JQuery Library. Please download the library (minified version) from http://jquery.com/download
I will create a simple HTML page.There will be two thumbnails pics on it. There will also be the drag and drop area where the user will drag the thumb pics into it and they will resize to their actual size.
The HTML markup for the page follows
<!doctype html>
<html lang="en">
<head>
<title>Liverpool Legends Gallery</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" charset="utf-8" src="jquery-1.8.1.min.js"></script>
<script language="JavaScript" src="drag.js"></script>
</head>
<body>
<header>
<h1>A page dedicated to Liverpool Legends</h1>
<h2>Drag and Drop the thumb image in the designated area to see the full image</h2>
</header>
<div id="main">
<img src="thumbs/steven-gerrard.jpg"
big="large-images/steven-gerrard-large.jpg" alt="John Barnes">
<img src="thumbs/robbie-fowler.jpg"
big="large-images/robbie-fowler-large.jpg" alt="Ian Rush">
<div id="drag">
<p>Drop your image here</p>
</div>
</body>
</html>
There is nothing difficult or fancy in the HTML markup above. I have a link to the external JQuery library and another javascript file that I will implement the whole drag and drop functionality.
The code for the css file (style.css) follows
#main{
float: left;
width: 340px;
margin-right: 30px;
}
#drag{
float: left;
width: 400px;
height:300px;
background-color: #c0c0c0;
}
These are simple CSS rules. This post cannot be a tutorial on CSS.For all these posts I assume that you have the basic HTML,CSS,Javascript skills.
Now I am going to create a javascript file (drag.js) to implement the drag and drop functionality.
I will provide the whole code for the drag.js file and then I will explain what I am doing in each step.
$(function() {
var players = $('#main img');
players.attr('draggable', 'true');
players.bind('dragstart', function(event) {
var data = event.originalEvent.dataTransfer;
var src = $(this).attr("big");
data.setData("Text", src);
return true;
});
var target = $('#drag');
target.bind('drop', function(event) {
var data = event.originalEvent.dataTransfer;
var src = ( data.getData('Text') );
var img = $("<img></img>").attr("src", src);
$(this).html(img);
if (event.preventDefault) event.preventDefault();
return(false);
});
target.bind('dragover', function(event) {
if (event.preventDefault) event.preventDefault();
return false;
});
players.bind('dragend', function(event) {
if (event.preventDefault) event.preventDefault();
return false;
});
});
In these lines
var players = $('#main img');
players.attr('draggable', 'true');
We grab all the images in the #main div and store them in a variable and then make them draggable.
Then in following lines I am using the dragstart event.
players.bind('dragstart', function(event) {
var data = event.originalEvent.dataTransfer;
var src = $(this).attr("big");
data.setData("Text", src);
return true;
});
In this event I am associating the custom data attribute value with the item I am dragging.
Then I create a variable to get hold of the dropping area
var target = $('#drag');
Then in the following lines I implement the drop event and what happens when the user drops the image in the designated area on the page.
target.bind('drop', function(event) {
var data = event.originalEvent.dataTransfer;
var src = ( data.getData('Text') );
var img = $("<img></img>").attr("src", src);
$(this).html(img);
if (event.preventDefault) event.preventDefault();
return(false);
});
The dragend event is fired when the user has finished the drag operation
players.bind('dragend', function(event) {
if (event.preventDefault) event.preventDefault();
return false;
});
When this method event.preventDefault() is called , the default action of the event will not be triggered.
Please have a look a the picture below to see how the page looks before the drag and drop takes place.
Then simply I drag and drop a picture in the dropping area.Have a look at the picture below
It works!!!
Hope it helps!!
