jQuery UI Sort disable issue

Question

I have a nested sortable list:

<ul class="testSortable">
    <li class="ui-state-default" rel="1">What Can I Say?
        <ul class="testSortable" rel="1">
           <li class="ui-state-default" rel="4">Total Divisions
             <ul class="testSortable" rel="4"></ul>
           </li>
        </ul>
    </li>
</ul>

I'm trying to make it so UI Sort can drag and drop throughout the list, the issue is making it so it cannot drop to a child element and cause the whole node to disappear.

My current code is:

$('.testSortable').sortable({ 
axis:        'y',
cursor:      'move',
connectWith: '.testSortable',
placeholder: 'ui-state-highlight',   
start: function(evt, ui){
 $(ui.item).children(".testSortable").sortable('disable');
},
stop: function(evt, ui){
 $(ui.item).children(".testSortable").sortable('enable');
}
});

This seems to make the class on the child elements show as disabled, but doesn't actually disable anything, so the placeholder is opaque but you may still drop to the child element.

Any Suggestions?

Answer 1

After searching for a way to actually disable the nodes without success, I came up with a work-around.

start: function(evt, ui){
   $(".testSortable", ui.item).hide();     
},
stop: function(evt, ui){
   $(".testSortable", ui.item).show();     
}

Mainly just hiding the sub nodes until the sorted option is moved to its final position.