I am trying to implement jquery UI nested sortables with more than one UL. Below is the code,
<html>
<head>
<script type="text/javascript" src="js/jquery-1.5.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#example5 ul").sortable({
connectWith: "#example5 ul",
placeholder: "ui-state-highlight"
});
$("span.item-controls").click(function(){
//alert($(this).parent().next('div').attr('class'))
var v = $(this).parent().next('div.panel');
v.slideToggle("slow");
});
});
</script>
<style>
ul {
min-height:10px;
}
li {
margin:5px;
width:auto;
border:1px solid #000;
list-style-type:none;
cursor:move;
}
#example5 {
display: inline-block;
float: left;
position: relative;
width:900px;
}
.fright
{
float:right;
}
.item-controls {
cursor: pointer;
font-size: 12px;
position: relative;
right: 20px;
top: 5px;
background: url("images/arrows.png") no-repeat scroll transparent;
xborder: 1px solid #000;
background-position:3px 0px;
width:20px;
height:15px;
}.ui-sortable{
margin:0px;padding:0px;
}
.ahead
{
margin:0px;
}
div.panel
{
height:auto;
display:none;
}
div.panel
{
margin:0px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<div id="example5"><!--UL1-->
<ul style="width:32%;float:left;" class="navigation">
<li ><p class="ahead"><span class="heading">Item 1 </span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 1</p>
</div>
<ul>
<li >
<p class="ahead"><span class="heading">Item 1 1</span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 1 1</p>
</div>
<ul></ul></li>
<li >Item 1 2<ul></ul></li>
<li >Item 1 3<ul></ul></li>
</ul>
</li>
<li >
<p class="ahead"><span class="heading">Item 2 </span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 2</p>
</div>
<ul><li >Item 2 1<ul></ul></li></ul>
</li>
<li >Item 3<ul></ul></li>
<li >Item 4<ul></ul></li>
</ul>
<!--UL2-->
<ul style="width:32%;float:left;" class="navigation2">
<li ><p class="ahead"><span class="heading">Item 1 </span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 1</p>
</div>
<ul>
<li >
<p class="ahead"><span class="heading">Item 1 1</span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 1 1</p>
</div>
<ul></ul></li>
<li >Item 1 2<ul></ul></li>
<li >Item 1 3<ul></ul></li>
</ul>
</li>
<li >
<p class="ahead"><span class="heading">Item 2 </span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 2</p>
</div>
<ul><li >Item 2 1<ul></ul></li></ul>
</li>
<li >Item 3<ul></ul></li>
<li >Item 4<ul></ul></li>
</ul>
<!--UL3-->
<ul style="width:32%;float:left;" class="navigation3">
<li ><p class="ahead"><span class="heading">Item 1 </span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 1</p>
</div>
<ul>
<li >
<p class="ahead"><span class="heading">Item 1 1</span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 1 1</p>
</div>
<ul></ul></li>
<li >Item 1 2<ul></ul></li>
<li >Item 1 3<ul></ul></li>
</ul>
</li>
<li >
<p class="ahead"><span class="heading">Item 2 </span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 2</p>
</div>
<ul><li >Item 2 1<ul></ul></li></ul>
</li>
<li >Item 3<ul></ul></li>
<li >Item 4<ul></ul></li>
</ul>
</div>
</body>
</html>
So far so good,got the expected result. Now my requirement is, From UL-1 should not be sortable with UL-2 and UL-3 also from UL-2,UL-3 should not be sortable together.Hope you understand the requirement. Is it possible to do that. Kindly advice on this.
Try use this way
So your target will be always your main UL and remains are just for sortable elements.
Note:
I added different class names to your html part to use this solution.