JQuery UI Sortable - limit drop to certain elements

Question

Hi,

I have a number of ul's which the user is able to sort li's into. I have 2 different types of li and need to restrict which list they can be dropped into. Here is a small example:

<ul class="top">
    <li class=typeA">Item</li>
    <li class=typeA">Item</li>
    <li class=typeB">Item</li>
        <ul class="sub">
            <li class=typeB">Item</li>
            <li class=typeB">Item</li>
            <li class=typeB">Item</li>
        </ul>
</ul>

<ul class="top">
    <li class=typeA">Item</li>
    <li class=typeA">Item</li>
    <li class=typeA">Item</li>
</ul>

1. TypeA can only ever appear at the top level, and must only be able to be dropped into another top level group.

2. TypeB can appear at either top or sub level and must be able to be dropped into either group.

3. Also, the sub ul group must be able to be dropped from one top group to another.

Using the following code, I am able to acheive point 1 and partly point 2, but when a TypeB has been moved from the sub group into the top group it can then never go back:

$(function() {
    $('.connectedSortable').sortable({
        'items': '> li',
        'connectWith': '.connectedSortable'
    });
    $('.subList').sortable({
        'items': 'li',
        'connectWith': '.connectedSortable'
    });
});

Any help would be greatly appreciated.

Thanks