destroy и пересоздание

Библиотека SortableJS предоставляет гибкие механизмы для управления сортируемыми списками. Одной из ключевых операций является удаление экземпляра Sortable и его повторное создание с изменёнными настройками. Это необходимо в ситуациях, когда требуется динамическая перестройка интерфейса или изменение поведения списка без перезагрузки страницы.

Метод destroy

Каждый экземпляр Sortable имеет метод destroy(), который полностью удаляет привязку к DOM-элементу:

const sortable = new Sortable(listElement, {
    animation: 150,
    ghostClass: 'sortable-ghost'
});

// Полное уничтожение Sortable
sortable.destroy();

Особенности метода destroy:

  • Удаляет все обработчики событий, связанные с конкретным экземпляром Sortable.
  • Возвращает DOM-элемент в исходное состояние, удаляя CSS-классы, добавленные библиотекой (sortable-ghost, sortable-chosen, sortable-drag и другие).
  • Не удаляет сам DOM-элемент или его содержимое, что позволяет создавать новый экземпляр на том же элементе.

Пересоздание экземпляра Sortable

После вызова destroy() можно создать новый экземпляр с изменёнными параметрами:

// Новый экземпляр с другими настройками
const newSortable = new Sortable(listElement, {
    animation: 300,
    handle: '.handle',
    swapThreshold: 0.65
});

Ключевые моменты при пересоздании:

  1. Можно изменить любые параметры, включая:

    • animation — длительность анимации перетаскивания.
    • handle — элемент, за который пользователь может захватывать элементы списка.
    • filter и preventOnFilter — управление недоступными для перетаскивания элементами.
    • group — логика совместной сортировки между списками.

  2. Новые обработчики событий можно привязать при создании или через on():

newSortable.on('end', function(evt) {
    console.log('Элемент перемещён:', evt.item);
});
  1. Сохранение состояния элементов: метод destroy не влияет на порядок элементов в DOM. Если требуется восстановить предыдущий порядок, можно сохранять его до уничтожения экземпляра.

Практические сценарии

  • Динамическая смена настроек интерфейса: если необходимо изменить поведение drag-and-drop после взаимодействия пользователя (например, включить/отключить анимацию или ограничить перемещение определённых элементов).
  • Перезагрузка данных списка: при обновлении элементов через AJAX проще уничтожить старый Sortable и создать новый с актуальным набором элементов.
  • Совместимость с библиотеками UI: иногда другие библиотеки меняют DOM, что требует пересоздания Sortable, чтобы корректно привязать события.

Рекомендации по использованию

  • Всегда хранить ссылку на экземпляр Sortable, чтобы корректно вызвать destroy().
  • После уничтожения не использовать старые методы экземпляра — они перестают работать.
  • Создание нового экземпляра на том же элементе полностью безопасно и не приводит к дублированию обработчиков.
  • При работе с динамическими списками важно учитывать порядок элементов и их идентификаторы, чтобы избежать несоответствия данных и визуального состояния.

Пример комплексного пересоздания

let sortableInstance = new Sortable(listElement, {
    animation: 150,
    handle: '.drag-handle'
});

// Изменение конфигурации через destroy и пересоздание
function reinitializeSortable(newOptions) {
    sortableInstance.destroy();
    sortableInstance = new Sortable(listElement, {
        ...newOptions
    });
}

// Пример вызова с новыми настройками
reinitializeSortable({
    animation: 300,
    handle: '.new-handle',
    swapThreshold: 0.6
});

Такой подход позволяет полностью управлять поведением сортируемого списка в реальном времени, сохраняя контроль над всеми аспектами Drag-and-Drop.

Методы destroy() и пересоздания являются базовыми инструментами динамической работы с SortableJS, обеспечивая гибкость интерфейса и предотвращая накопление устаревших обработчиков событий.

Оглавление