DotNetStories
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!!