One Div to an another Div drag and drop Jquery Example

One Div to an another Div drag and drop Jquery Example

Many times during application development to make our application much more user friendly we required to implement drag and drop facility. Drag and 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 this drag and drop Jquery example how I implemented 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>
<title>Drag n Drop from a Div to an another Div using Jquery</title>
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></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="" /></div>
<div id="container"></div>
<script type="text/javascript">
$("#dragImage").draggable({ helper: "clone" });
drop: function(event, ui) {
$("#container").append("<img id='dragImage' src='' />");

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 using append method.