Drag n Drop is a user interface mechanism using which user can copy, reorder or deletion of items through the use of mouse. To drag you need to select the element then click and hold the element using your mouse pointer. Drag it to the container area and release the mouse button to drop the element inside.
Many times during application development to make our application much more user friendly we required to implement drag and drop facility. Whether the matter of Dashboard or Datagrid using drag and drop we can make to page more user friendly. Drag and Drop can be done using both server-side and client-side scripting. For high performance webpages or apps its wise to implement drag and drop using Client-side Scripting. This practice reduces network load.
JQuery is a Javascript library. To implement drag and drop using Javascript we must need to write some 40 to 50 lines of Code. While using JQuery in-built methods we can do the same in 5 to 6 lines of Code. In the below demo app I have two panels left panel & right panel. Left panel is a div which is called toolbar. Right panel is an another div called Container. What I need is from left pan toolbar I need to drag nodes to container area. While dragging I need to generate cloning for the draggable element over Container area. Look at this drag and drop Jquery example how I implemented the things using JQuery draggable method.
To run the below demo app copy the codes to a Notepad file. Save it as a HTML file. Then open the file in your browser.
Drag and Drop JQuery Example
<!Doctype html>
<html>
<head>
<title>Drag n Drop from a Div to an another Div using Jquery</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style type="text/css">
#toolbar { float:left; border-style:solid; border-color:#000000; border-width:thin; width: 120px; height: 350px; margin-right:3px; }
#container { float:left; border-style:solid; border-color:#000000; border-width:thin; width:800px; height:540px; }
#dragImage { width:64px; height:64px; }
</style>
</head>
<body>
<div id="toolbar">
<div class="tbutton"><img id="dragImage" src="http://www.html5canvastutorials.com/demos/assets/yoda.jpg" /></div>
</div>
<div id="container"></div>
<script type="text/javascript">
$("#dragImage").draggable({ helper: "clone" });
$("#container").droppable({
drop: function(event, ui) {
$("#container").append("<img id='dragImage' src='http://www.html5canvastutorials.com/demos/assets/yoda.jpg' />");
}
});
</script>
</body>
</html>
In the above example I used CDN files for Jquery and Jquery UI library. Toolbar div contains an image as a node. Container is an another div where I need to drag the image. To make a clone here I used $(“#dragImage”).draggable({ helper: “clone” });. To drop the draggable node in container area for container area I used droppable method with drop event. In drop event I am appending the draggable image to container area using append method. JQuery draggable method supported by all the major web browsers like Google Chrome, Mozila Firefox and Safari.
One Div to an another Div using JQuery draggable() method
The JQuery draggable() method has 2 forms $(selector, context).draggable (options); and $(selector, context).draggable (“action”, [params]);. There 4 different options (addClass, axis, containment and opacity) you can use with this method. Similar to draggable method the droppable() method has also 2 forms $(selector, context).droppable (options), $(selector, context).droppable (“action”, params). There 3 different options (accept, addClass and disable) you can use with this method.
Othe API
From Product Gallery to your Mail Box drag and drop feature creates better user experience. This feature saves user time. For an example in your gmail while grouping some selected mail under a new label drag and drop feature works awesome. After JQuery we can implement drag and drop using other technologies like HTML5 and pure Javascript. Now HTML5 comes with drag n drop API. Look at the sample code.
<!DOCTYPE HTML>
<html>
<head>
<style>
#divdd { width: 340px; height: 80px; padding: 10px; border: 1px solid #aaaaaa; }
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="divdd" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="dragdd" src="img_jharaphula.gif" draggable="true" ondragstart="drag(event)" width="330" height="60">
</body>
</html>
