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/downloadI 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!!
