Summary
Testing to see if I can have many levels of inter-list sorting with the jQuery UI. I can!
Date Created
25 August 2009
Help
jQuery UI - Demo & Documentation - Sortable
Example
- sortInside1
- sortInside1
- sortInside1
- sortInside1
- sortInside2
- sortInside2
- sortInside2
- sortInside2
- sortInside3
- sortInside3
- sortInside3
- sortInside3
Internal CSS in <head>
#sortOutside{
padding:10px;
background-color:#FFCC99;
width:200px;
}
#sortInside1{
padding:10px;
background-color:#CCFFFF;
}
#sortInside1 li{
padding:10px;
margin-bottom:5px;
background-color:#33CCFF;
}
#sortInside2{
padding:10px;
background-color:#CCFF66;
}
#sortInside2 li{
padding:10px;
margin-bottom:5px;
background-color:#33CC00;
}
#sortInside3{
padding:10px;
background-color:#FFCCCC;
}
#sortInside3 li{
padding:10px;
margin-bottom:5px;
background-color:#FF3366;
}
HTML in Example
<div id="sortOutside">
<ul class="sortInside" id="sortInside1">
<li>sortInside1</li>
<li>sortInside1</li>
<li>sortInside1</li>
<li>sortInside1</li>
</ul><!-- end .sortInside -->
<ul class="sortInside" id="sortInside2">
<li>sortInside2</li>
<li>sortInside2</li>
<li>sortInside2</li>
<li>sortInside2</li>
</ul><!-- end .sortInside -->
<ul class="sortInside" id="sortInside3">
<li>sortInside3</li>
<li>sortInside3</li>
<li>sortInside3</li>
<li>sortInside3</li>
</ul><!-- end .sortInside -->
</div><!--end #sortOutside-->
Written-out JavaScript after Example
$("#sortOutside").sortable().disableSelection();
$(".sortInside").sortable({
connectWith: '.sortInside'
}).disableSelection();