jQuery .sortable - nested lists
Preventing drag drop of certain list items (particularly ones with nested lists)
HTML
<script src="http://code.jquery.com/ui/1.8.22/jquery-ui.min.js"></script>
<p>sublists shouldn't be able to be dragged out of their normal list</p>
<ul id="list1" class='mainlist'>
<li class="group">Asset
<ul class="sublist">
<li class="hasItems">Bank
<ul class="sublist connected">
<li>subitem1-1</li>
<li>subitem1-2</li>
<li>subitem1-3</li>
<li>subitem1-4</li>
</ul>
</li>
<li class="hasItems">AR
<ul class="sublist connected">
<li>subitem2-1</li>
<li>subitem2-2</li>
<li>subitem2-3</li>
<li>subitem2-4</li>
</ul>
</li>
<li class="hasItems">VZ
<ul class="sublist connected">
<li>subitem3-1</li>
<li>subitem3-2</li>
<li>subitem3-3</li>
<li>subitem3-4</li>
</ul>
</li>
</ul>
</li>
<li class="group">Liability
<ul class="sublist">
<li class="hasItems">Bank5
<ul class="sublist connected">
<li>subitem1-15</li>
<li>subitem1-25</li>
<li>subitem1-35</li>
<li>subitem1-45</li>
</ul>
</li>
<li class="hasItems">AR5
<ul class="sublist">
<li>subitem2-15</li>
<li>subitem2-25</li>
<li>subitem2-35</li>
<li>subitem2-45</li>
</ul>
</li>
<li class="hasItems">VZ5
<ul class="sublist">
<li>subitem3-15</li>
<li>subitem3-25</li>
<li>subitem3-35</li>
<li>subitem3-45</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
body
{
font-family: Arial, Tahoma, San-Serif;
font-size: 11px;
}
p
{
margin: 0 0 20px;
}
ul.mainlist
{
float: left;
margin: 0 20px 0 0;
width: 100px;
}
ul.mainlist li
{
background: #fff;
border: solid 1px #ccc;
padding: 10px;
}
ul.sublist
{
min-height: 40px;
background: gold;
}
JavaScript
$(function() {
$('li.group ul.sublist').sortable({
});
$('.hasItems ul.sublist').sortable({
connectWith: ".connected"
}).disableSelection();
});