JQuery UI Sortable - restriction for individual elements

Question

I have a ul number that the user can sort into. I have 2 different types of li and you need to limit the list to which they can be deleted. 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>

• TypeA can only appear at the top level and should only be available in another top-level group.

• TypeB can be displayed at both the upper and lower levels and must be deleted to any group.

• In addition, the subgroup must be removed from one upper group to another.

Using the following code, I can execute point 1 and partially point 2, but when TypeB was moved from a subgroup to the upper group, it will not be able to go back:

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

Any help would be greatly appreciated.

thank

Answer 1

, , , B , A. , , "over", , , .