Подтвердить что ты не робот

JQuery Вложенная сортировка - перемещение элементов LI во всех доступных UL

У меня есть следующий код, который работает, хотя он работает довольно медленно, я чувствую. То, что я хочу сделать, позволяет <li> свободно перемещаться в существующем <ul> или перемещать их на уровень. Я также хочу иметь возможность создавать иерархии, поэтому, если вы перетащили <li> под другой <li>, который создал бы иерархию. Я думаю, что в этом смысле мне пришлось бы сделать <ul> под каждым <li> на всякий случай. Я только хочу ограничить его на 2 или 3 уровня.

$("#sort_list").sortable({
  containment: 'parent',                                                                                     
  axis: 'y',
  revert: true,
  opacity: 0.8
});
$(".sub_list").sortable({ 
  containment: 'parent',
  axis: 'y',
  revert: true,
  opacity: 0.8,
});
$("#sort_list").disableSelection();

<ul id="sort_list">
  <li>one</li>
  <li>two
    <ul class="sub_list">
    <li>sub one</li>
    <li>sub two</li>
    </ul>
  </li>
  <li>three</li>
  <li>four</li>
</ul>
4b9b3361

Ответ 1

Отличный ответ на этот вопрос

https://github.com/ilikenwf/nestedSortable

Я рад, что нашел его. jstree был слишком тяжелым для меня.

Ответ 3

Я использовал плагин интерфейса JQuery, который легко настраивался и работал очень хорошо для этой задачи (проверьте demo), но я хотел что-то более легкое и не требующее дополнительных плагинов.

Даже библиотека JQuery UI, сортируемая, является рудиментарной, вы все равно можете добиться какой-то функциональности:

$("ul").sortable({
items:  '> li',
axis: 'y',
update: function (e, ui) {
    ...
}

Это позволит вам сортировать "li" под любой "ul" (если я правильно помню). Однако он не позволит вам перемещать элементы "li" из одной "ul" в другую "ul" . Даже это можно сделать (меняя конфигурацию), я обнаружил, что это не так стабильно и как-то громоздко.

Я придумал простое решение: кнопка "флаг", которая деактивирует сортировку и активирует перемещение... и это работает как шарм! Все, что вам нужно сделать, - это отслеживать родительский идентификатор "li" до и после его перемещения.

Мои 5 центов.

Ответ 4

Скорее всего, функции сортировки библиотеки jQuery UI не настраиваются (это очень рудиментарно, предназначено для сортировки списков на один уровень). Вам будет лучше просто использовать один из плагинов дерева, поддерживающий drag and drop.

Виджет дерева jQuery UI в разработке, но вы можете использовать один из следующих плагинов:

http://www.jstree.com/

http://abeautifulsite.net/notebook/58

http://news.kg/wp-content/uploads/tree/

http://bassistance.de/jquery-plugins/jquery-plugin-treeview/