Tutorial for Jquery nested drag and drop widget
Step 1. Include the following js files in your head section
<script src=”./jquery-1.4.4.js”></script>
<script src=”./jquery.ui.core.js”></script>
<script src=”./jquery.ui.widget.js”></script>
<script src=”./jquery.ui.mouse.js”></script>
<script src=”./jquery.ui.sortable.js”></script>
<script src=”./jquery.ui.draggable.js”></script>
Step 2. Put the below css in you css file of style tag
<style type=”text/css”>
h1
{
color:red;
background: gray;
}
dl dl{
margin:20px;
}
dl,ul,li,dt
{
border-width: 2px;
border-style: dashed;
border-color: #D3D3D3;
display:block;
padding:20px;
margin-top:10px;
}
.ui-state-disabled
{
padding : 0px !important;
background: gray;
}
dl#thirdlidivul1 dt
{
width:100px;
}
dl#thirdlidivul2 dt
{
width:100px;
}
#thirdlidiv dl
{
width:150px;
margin:10px;
}
#thirdlidiv
{
border-width: 2px;
border-style: dashed;
border-color: #D3D3D3;
}
#maindiv
{
border-width: 2px;
border-style: dashed;
border-color: #D3D3D3;
width: 650px;
padding:20px;
float:left;
}
.sidebar{ width:288px; float:left; margin:0px 0px 0px 10px}
.sidebar ul{ margin-top:0px; }
.ui-state-highlight { height: 10em; line-height: 1.2em; background-color:yellow;}
.ui-state-highlight1 { height: 1em; line-height: 1.2em; background-color:yellow;}
.ui-state-highlight2 { height: 2em; line-height: 1.2em; background-color:yellow;}
.clear
{
clear:both;
line-height:0px;
height:0px;
}
</style>
3. Put the below html in you body section
<h1>Main Div</h1>
<div id=”maindiv”>
<h1>Mail UL</h1>
<ul id=”mainul”>
<li><h1>Un movable (<li>)</h1></li>
<li>
<h1>First LI</h1><p>All callbacks (start, stop, drag) receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument ‘ui’):</p>
</li>
<li>
<h1>Second LI</h1><p>All callbacks (start, stop, drag) receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument ‘ui’):</p>
</li>
<li>
<h1>Third LI</h1><p>All callbacks (start, stop, drag) receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument ‘ui’):</p>
<div id=”thirdlidiv” style=”padding:20px; margin:0px auto; width:480px”>
<dl id=”thirdlidivul1″ style=”float: left;”>
<dt>Li 1</dt>
<dt>Li 2</dt>
<dt>Li 3</dt>
<dt>Li 4</dt>
</dl>
<dl id=”thirdlidivul2″ style=”float: left;”>
<dt>Li 1</dt>
<dt>Li 2</dt>
<dt>Li 3</dt>
<dt>Li 4</dt>
</dl>
<div></div>
</div>
<div></div>
</li>
<li>
<h1>Fourth LI</h1><p>All callbacks (start, stop, drag) receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument ‘ui’):</p>
<div id=”forthlidiv”>
<dl id=”forthlidivul”>
<dt>Li 1</dt>
<dt>Li 2</dt>
<dt>Li 3</dt>
<dt>Li 4</dt>
</dl>
</div>
</li>
</ul>
</div>
<div>
<ul id=”sidebarul”>
<li>Li 1</li>
<li>Li 2</li>
<li>Li 3</li>
</ul>
</div>
Last Step . put the below js code in your html file just before the body tag end.
<script type=”text/javascript”>
$(document).ready(function() {
$(‘ul#mainul’).sortable({
connectWith: “div > ul li.drli”,
placeholder: “ui-state-highlight”,
items: “li:not(.ui-state-disabled)”,
containment:’parent’,
handle : “h1″
});
$(‘dl#forthlidivul’).sortable({
connectWith: “dt”,
placeholder: “ui-state-highlight1″,
containment:’parent’,
});
$(‘dl#thirdlidivul1, dl#thirdlidivul2′).sortable({
connectWith: “div#thirdlidiv dl”,
placeholder: “ui-state-highlight1″,
containment:’div#thirdlidiv’,
});
$(‘ul#sidebarul’).sortable({
connectWith: “div#sidebar > ul”,
placeholder: “ui-state-highlight2″,
containment:’parent’,
});
});
</script>
You can also check our online demo
To download please click here
