JQuery UI Sortable - limit drop to certain elements

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'
    }开发者_Python百科);
});

Any help would be greatly appreciated.

Thanks

I don't think you can achieve this with just configuring a table because once you move a B item to the top level its going to behave like an A item. I think you are going to have to set events on each table, such as the 'over' event, and write code to check if the item being moved belongs in this list or not.