Сортируемый пользовательский интерфейс JQuery - ограничение по определенным элементам

Question

У меня есть несколько ul, в которые пользователь может сортировать li.У меня есть 2 разных типа li, и мне нужно ограничить список, в который они могут быть добавлены.Вот небольшой пример:

<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 может появиться только на верхнем уровне, и его можно поместить только в другую группу верхнего уровня.

2. TypeB может появляться либо на верхнем, либо на подуровне, и его можно включать в любую группу.

3. Кроме того, группа sub ul должна иметьупал из одной верхней группы в другую.

Используя следующий код, я могу достичь точки 1 и частично точки 2, но когда TypeB был перемещен из подгруппы вверхняя группа никогда не сможет вернуться:

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

Любая помощь будет принята с благодарностью.

Спасибо

Answer 1

Я не думаю, что вы можете достичь этого, просто настроив таблицу, потому что как только вы переместите элемент B на верхний уровень, он будет вести себя как элемент A.Я думаю, вам придется устанавливать события для каждой таблицы, такие как событие «over», и писать код, чтобы проверить, принадлежит ли перемещаемый элемент этому списку или нет.