toArray и метод store

SortableJS — это мощная библиотека для создания интерактивных списков с поддержкой перетаскивания элементов (drag-and-drop) в браузере. Среди множества её возможностей особое место занимают методы toArray и store, которые обеспечивают удобное управление порядком элементов и сохранение состояния списков.

Метод toArray

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

Синтаксис:

let order = sortable.toArray();

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

  • Метод возвращает массив строк, каждая строка соответствует значению атрибута data-id элемента списка.
  • Если элемент списка не содержит атрибут data-id, он игнорируется при формировании массива.
  • Можно использовать для проверки текущего порядка элементов перед сохранением изменений.

Пример использования:

let sortable = new Sortable(document.getElementById('myList'), {
  animation: 150,
  dataIdAttr: 'data-id'
});

// Получение порядка элементов
let currentOrder = sortable.toArray();
console.log(currentOrder); // ["item1", "item2", "item3"]

Примечание: Атрибут, который используется для идентификации элементов, указывается через опцию dataIdAttr. По умолчанию это id, но для удобства часто используют кастомные атрибуты, такие как data-id.

Объект store

Объект store предназначен для сохранения и восстановления порядка элементов между перезагрузками страницы или при повторном инициализации SortableJS. Он предоставляет два метода: get и set.

Свойства и методы:

  • store.get(sortable): вызывается библиотекой для получения сохраненного порядка элементов.
  • store.set(sortable): вызывается после завершения операции drag-and-drop для сохранения нового порядка.

Синтаксис настройки:

let sortable = new Sortable(listElement, {
  store: {
    get: function(sortable) {
      let order = localStorage.getItem(sortable.options.group.name);
      return order ? order.split('|') : [];
    },
    set: function(sortable) {
      let order = sortable.toArray();
      localStorage.setItem(sortable.options.group.name, order.join('|'));
    }
  }
});

Разбор ключевых аспектов:

  1. Сохранение в локальное хранилище: В примере используется localStorage, что позволяет хранить порядок элементов между сессиями браузера.
  2. Возврат массива из строки: Для удобства массив сохраняется как строка, разделённая символом '|'. Метод get разбивает строку обратно в массив.
  3. Интеграция с toArray: Метод toArray обеспечивает получение текущего порядка элементов, который передаётся в store.set для сохранения.

Совмещение toArray и store

Совместное использование этих функций позволяет реализовать динамичные и устойчивые списки. Основной подход:

  1. Инициализация SortableJS с указанием атрибута для идентификации элементов.
  2. Настройка объекта store для сохранения состояния.
  3. Использование toArray при необходимости получения текущего порядка элементов для обработки или передачи на сервер.

Пример с интеграцией с сервером:

let sortable = new Sortable(document.getElementById('taskList'), {
  animation: 200,
  dataIdAttr: 'data-id',
  store: {
    get: function(sortable) {
      let saved = localStorage.getItem('taskOrder');
      return saved ? saved.split(',') : [];
    },
    set: function(sortable) {
      let order = sortable.toArray();
      localStorage.setItem('taskOrder', order.join(','));

      // Отправка на сервер
      fetch('/upd ate-order', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ order: order })
      });
    }
  }
});

В этом примере:

  • toArray используется для формирования массива текущего порядка элементов.
  • store.se t сохраняет порядок локально и отправляет на сервер.
  • store.get восстанавливает порядок при повторной загрузке страницы.

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

  • Всегда использовать уникальные идентификаторы элементов, чтобы toArray и store работали корректно.
  • Для сложных списков с вложенными элементами рекомендуется использовать опцию dataIdAttr вместо стандартного id.
  • Если порядок элементов изменяется динамически через JavaScript, вызывать toArray после всех изменений, чтобы получить актуальный порядок.

Метод toArray и объект store в SortableJS создают мощный инструмент для управления состоянием интерактивных списков, обеспечивая простое и надежное сохранение порядка элементов как локально, так и на сервере. Эти функции являются фундаментальными для реализации устойчивого и масштабируемого интерфейса с drag-and-drop.

Оглавление