Drag n Drop from one Div to an another Div using Jquery


Many times during application development to make our application much more user friendly we required to implement drag n drop facility. Drag n Drop can be done using client side scripting. In this matter Jquery helps a great. In the below sample code 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 panel toolbar I need to drag nodes to container area. While dragging I need to generate cloning for the draggable element. Look at the sample code below.

Copy the below code into a Notepad file. Save it as a HTML file. Run it you can watch the example.

Drag n Drop using Jquery

<!Doctype html>
<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; }
<div id="toolbar">
<div class="tbutton"><img id="dragImage" src="http://www.html5canvastutorials.com/demos/assets/yoda.jpg" /></div>
<div id="container"></div>
<script type="text/javascript">
$("#dragImage").draggable({ helper: "clone" });
drop: function(event, ui) {
$("#container").append("<img id='dragImage' src='http://www.html5canvastutorials.com/demos/assets/yoda.jpg' />");

In the above example I used CDN files for Jquery & 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.