Получение нового порядка элементов

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

Основные методы получения порядка

После инициализации SortableJS у контейнера можно получить актуальный порядок элементов несколькими способами.

  1. Метод toArray()

Метод toArray() возвращает массив идентификаторов элементов в текущем порядке. Для корректной работы необходимо присвоить каждому элементу уникальный id:

const list = document.getElementById('sortable-list');

const sortable = Sortable.create(list, {
  animation: 150,
});

const currentOrder = sortable.toArray();
console.log(currentOrder);

Ключевые моменты:

  • Возвращается массив строк, соответствующих id элементов.
  • Используется для сериализации порядка элементов перед отправкой на сервер.
  • Работает только при наличии уникальных идентификаторов у элементов.
  1. Событие onEnd

Событие onEnd вызывается после завершения перетаскивания. Это удобное место для получения обновлённого порядка:

const sortable = Sortable.create(list, {
  animation: 150,
  onEnd: function (evt) {
    const upd atedOrder = sortable.toArray();
    console.log('Новый порядок элементов:', updatedOrder);
  }
});

Особенности:

  • Позволяет реагировать на каждое изменение порядка.
  • Внутри обработчика можно сразу отправлять данные на сервер через AJAX или сохранять в localStorage.
  • Аргумент evt содержит информацию о перемещённом элементе: индекс, старое и новое положение.
  1. Метод sort() и пользовательская сериализация

Если требуется работать не с id, а с данными внутри элементов, можно использовать метод sort() для создания кастомного массива:

const updatedData = Array.from(list.children).map(item => item.dataset.value);
console.log(updatedData);

Преимущества:

  • Позволяет использовать любые данные, хранящиеся в data-* атрибутах.
  • Гибкость при интеграции с серверной логикой.
  • Не зависит от атрибута id.

Дополнительные настройки для удобного получения порядка

  • store: встроенный механизм сохранения состояния списка. Позволяет автоматически сохранять порядок в localStorage:
const sortable = Sortable.create(list, {
  animation: 150,
  store: {
    se t: function (sortable) {
      const order = sortable.toArray();
      localStorage.setItem(sortable.options.group.name, order.join('|'));
    },
    get: function (sortable) {
      const order = localStorage.getItem(sortable.options.group.name);
      return order ? order.split('|') : [];
    }
  }
});
  • dataIdAttr: если элементы используют не id, а собственный атрибут для идентификации, можно указать его:
Sortable.create(list, {
  dataIdAttr: 'data-item-id'
});

Работа с вложенными списками

SortableJS поддерживает вложенные списки. Для получения порядка элементов в таких структурах используется рекурсивный обход:

function getNestedOrder(container) {
  return Array.from(container.children).map(item => {
    const childList = item.querySelector('.nested-list');
    return {
      id: item.dataset.id,
      children: childList ? getNestedOrder(childList) : []
    };
  });
}

console.log(getNestedOrder(list));

Пояснения:

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

Практические советы

  • Всегда присваивать уникальные идентификаторы элементам, если планируется использование toArray().
  • Для динамически добавляемых элементов нужно пересоздавать экземпляр Sortable или использовать метод Sortable.create() с обновлённым списком.
  • Событие onEnd подходит для мгновенного реагирования на изменение порядка, а store — для долговременного хранения состояния.
  • Для сложных структур лучше использовать кастомную сериализацию через data-* атрибуты.

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

Оглавление