Заставить LI заканчивать список с помощью сортируемых списков, связанных с jQuery, используя заполнитель

Question

Я использую jQuery для создания связанных сортируемых списков, чтобы создать главное меню для веб-сайта.Левый список содержит доступные страницы, а правый список содержит текущую структуру меню.Я использую заполнители, чтобы выделить место, куда пользователь должен удалить элемент.

В данный момент пользователь может добавить элемент из левого списка в любую позицию в правом списке.

Я хотел бы иметь возможность заставить пользователя только добавлять элемент из левого списка в конец правого списка, отображая только заполнитель в конце этого списка.

Возможно ли этообойтись без особых проблем?

Answer 1

Я пытался сделать то же самое. Я обнаружил, что различные ошибки «слишком умны» с селекторами, чтобы получить этот эффект: (

Но сейчас я использую это для хорошего эффекта: -

$(document.body).on("sortupdate","<selector for list>",function(event,ui) {
    if (ui.item.parent().attr('id')==$(this).attr('id')) {
        ui.item.appendTo($(event.currentTarget));
}   }   );

Позволяет сбросить предмет, но затем перемещает его в конец контейнера.

Обновление сортировки вызывается для каждого обновления в любом связанном контейнере, поэтому необходимо проверить, действительно ли удаленный элемент был отброшен в контейнере, в котором вы хотите, чтобы элементы были доведены до конца.

Answer 2

Судя по звукам вашего поста, мне кажется, что философия UI-sortable находится в противоречии с вашими целями дизайна. Рассмотрим вместо этого ui-draggable (левый LI) и ui-droppable (правый UL). Тогда просто {drop: function (e, ui) {$ (this) .append (ui.draggable)})}.

Answer 3

Возможно, вы захотите попробовать jQuery UI: см. Демонстрацию функции перетаскивания .

Попробуйте поиграть с опцией accept.