jQuery .sortable - nested lists

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

by bizamajig

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="sortable_outer_list" data-sortable_connect_with=".sortable_outer_list">
    <li>One (a)</li>
    <li>Two (a)</li>
    <li class="hasItems">Three (a)
        <ul class="sortable_inner_list" data-sortable_connect_with=".sortable_inner_list">
            <li>subitem1-1</li>
            <li>subitem1-2</li>
            <li>subitem1-3</li>
            <li>subitem1-4</li>
        </ul>
    </li>
    <li>Four (a)</li>
    <li class="hasItems">Five (a)
        <ul class="sortable_inner_list" data-sortable_connect_with=".sortable_inner_list">
            <li>subitem2-1</li>
            <li>subitem2-2</li>
            <li>subitem2-3</li>
            <li>subitem2-4</li>
        </ul>
    </li>
</ul>
<ul id="list2" class="sortable_outer_list" data-sortable_connect_with=".sortable_outer_list">
    <li>1</li>
    <li>Two (b)</li>
    <li>Three (b)</li>
</ul>

CSS

body
{
    font-family: Arial, Tahoma, San-Serif;
    font-size: 11px;
}
p
{
    margin: 0 0 20px;
}
.sortable_outer_list
{
    float: left;
    margin: 0 20px 0 0;
    width: 100px;
}
.sortable_outer_list li /* Or, li */
{
    background: #fff;
    border: solid 1px #ccc;
    padding: 10px;
}

JavaScript

$(function() {
		var input__connectWith__outer = $( '.sortable_outer_list' ).data( 'sortable_connect_with' ),
		input__connectWith__inner = $( '.sortable_inner_list' ).data( 'sortable_connect_with' );
		$( '.sortable_outer_list' ).sortable({
	        connectWith: input__connectWith__outer // '.sortable_outer_list'
// 				connecWith: $( '.sortable_outer_list' ),
/*          
					beforeStop: function( ev, ui ) {
            if ( $(ui.item).hasClass( 'hasItems' ) && $(ui.placeholder).parent()[0] !== this ) {
                $(this).sortable( 'cancel' );
            }
			}
*/
    });
    $( '.sortable_inner_list' ).sortable({
	      	connectWith: input__connectWith__inner // '.sortable_inner_list'
//				connecWith: $( '.sortable_inner_list' )
    });
});