jQuery .sortable - nested lists

Preventing drag drop of certain list items (particularly ones with nested lists)

by Davos8549

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>Asset
					<ul class="sublist">
						<li class="hasItems">Bank
							<ul class="sublist">
								<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">
								<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">
								<li>subitem3-1</li>
								<li>subitem3-2</li>
								<li>subitem3-3</li>
								<li>subitem3-4</li>
							</ul>
						</li>
					</ul>
				
				</li>
				
				<li>Liability
					<ul class="">
						<li class="hasItems">Bank5
							<ul class="sublist">
								<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;
}

JavaScript

$(function() {
    $('ul.mainlist').sortable({
        connectWith: 'ul.mainlist',
        beforeStop: function(ev, ui) {
            if ($(ui.item).hasClass('hasItems') && $(ui.placeholder).parent()[0] != this) {
                $(this).sortable('cancel');
            }
        }
    });
    $('ul.sublist').sortable({
        connectWith: 'ul.sublist'
    });
});