Как связать несколько сортируемых списков друг с другом в пользовательском интерфейсе jQuery?
-
08-07-2019 - |
Вопрос
Я новичок в jQuery и полностью борюсь с использованием sortable
пользовательского интерфейса jQuery.
Я пытаюсь собрать страницу, чтобы упростить группировку и упорядочение элементов.
На моей странице есть список групп, а каждая группа содержит список элементов. Я хочу, чтобы пользователи могли выполнять следующие действия:
<Ол>Изменение порядка групп Изменение порядка элементов в группах Перемещайте элементы между группами Ол>
Первые два требования не являются проблемой. Я могу отсортировать их просто отлично. Проблема приходит с третьим требованием. Я просто не могу соединить эти списки друг с другом. Некоторый код может помочь. Вот разметка. Р>
<ul id="groupsList" class="groupsList">
<li id="group1" class="group">Group 1
<ul id="groupItems1" class="itemsList">
<li id="item1-1" class="item">Item 1.1</li>
<li id="item1-2" class="item">Item 1.2</li>
</ul>
</li>
<li id="group2" class="group">Group 2
<ul id="groupItems2" class="itemsList">
<li id="item2-1" class="item">Item 2.1</li>
<li id="item2-2" class="item">Item 2.2</li>
</ul>
</li>
<li id="group3" class="group">Group 3
<ul id="groupItems3" class="itemsList">
<li id="item3-1" class="item">Item 3.1</li>
<li id="item3-2" class="item">Item 3.2</li>
</ul>
</li>
</ul>
Мне удалось отсортировать списки, поместив $ ('# groupsList'). sortable ({});
и $ ('. itemsList'). sortable ({}) ;
в функции готовности документа
. Я попытался использовать параметр connectWith
для sortable
, чтобы это сработало, но я потерпел неудачу. Я хотел бы, чтобы каждый список groupItemsX
был подключен к каждому списку groupItemsX
, кроме самого себя. Как мне это сделать?
Я подумал, что мне нужно специально не связывать список с самим собой, чтобы не было какой-то циклической ссылки. Конечно, я не работаю с Excel, но казалось, что это может вызвать некую бесконечную рекурсию, которая может вызвать переполнение стека или что-то в этом роде. Хм. Извините за каламбур. Не мог с собой поделать. Р>
Во всяком случае, я пытался сделать что-то подобное, и это не сработало:
$('.groupsList').sortable(); // worked great
$('.groupsList').each( function () {
$(this).sortable( {
connectWith: ['.groupsList':not('#'+ $(this).attr('id') )];
});
});
Я уверен, что там я полностью исказил синтаксис, и я полагаю, что именно поэтому мне пришлось сначала задать вопрос. Есть ли необходимость или полезность с точки зрения производительности для фильтрации текущего элемента из списка?
Оба ответа, предоставленные Адамом и JimmyP, работали в IE (хотя они очень странно ведут себя в FireFox, перезаписывая элементы списка при попытке их перебрать) Я приму один из ваших ответов и проголосую за другой, но если у вас есть идеи / предложения по поводу фильтрации, я бы хотел их услышать.
Решение
Можете ли вы включить синтаксис, который вы использовали для connectWith
? Вы поместили список других групп в скобки (даже если это селектор)? То есть:
...sortable({connectWith:['.group'], ... }
Другие советы
Это должно работать:
$('#groupsList').sortable();
$('.itemsList').sortable({
connectWith: $('.itemsList')
});
$(function() {
$( "#groupItems1, #groupItems2, #groupItems3" ).sortable({
connectWith: ".itemsList"
}).disableSelection();
});
Все будет хорошо для вас! делаю то же самое здесь для меня. Никаких изменений в вашем HTML не требуется.