CI/CD интеграция

SortableJS — это современная JavaScript-библиотека для реализации drag-and-drop сортировки элементов в веб-приложениях. Она поддерживает работу с DOM-элементами без зависимостей от сторонних фреймворков, хотя интеграция с React, Vue и Angular также возможна. Основная задача библиотеки — упрощение создания интерактивных списков и сеток, которые можно динамически менять местами с помощью перетаскивания мышью или касанием.

Установка и подключение

SortableJS можно подключить несколькими способами:

Через npm:

npm install sortablejs

Через CDN:

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

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

Инициализация и базовое использование

Инициализация производится вызовом конструктора Sortable с передачей DOM-элемента и объекта настроек:

const list = document.getElementById('sortable-list');
const sortable = new Sortable(list, {
    animation: 150,
    handle: '.handle',
    ghostClass: 'sortable-ghost'
});

Ключевые параметры:

  • animation — скорость анимации при перемещении элементов (в миллисекундах).
  • handle — селектор элемента внутри каждого элемента списка, за который можно тянуть.
  • ghostClass — CSS-класс для создаваемого “призрачного” элемента во время перетаскивания.

Работа с событиями

SortableJS предоставляет множество событий, которые позволяют отслеживать изменения в списках:

  • onStart — срабатывает при начале перетаскивания.
  • onEnd — срабатывает при завершении перетаскивания.
  • onAdd — срабатывает при добавлении элемента из другого списка.
  • onUpdate — срабатывает, когда элемент перемещен внутри текущего списка.
  • onRemove — срабатывает при удалении элемента в пользу другого списка.

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

sortable.option('onEnd', function (evt) {
    console.log(`Элемент ${evt.item.textContent} перемещен с позиции ${evt.oldIndex} на позицию ${evt.newIndex}`);
});

Настройка и параметры

SortableJS поддерживает богатый набор параметров, позволяющих гибко настраивать поведение:

  • group — объединяет несколько списков, чтобы можно было перемещать элементы между ними. Может быть объектом с name и pull/push правилами.
  • sort — включение/отключение сортировки внутри списка.
  • filter — селектор элементов, которые нельзя перетаскивать.
  • draggable — селектор элементов, которые можно перетаскивать.
  • delay — задержка перед началом перетаскивания (полезно для сенсорных устройств).
  • swap и swapThreshold — позволяют менять элементы местами вместо перетаскивания на свободное место.

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

const groupOptions = {
    group: { name: 'shared', pull: true, put: true },
    animation: 200
};

Sortable.create(document.getElementById('list1'), groupOptions);
Sortable.create(document.getElementById('list2'), groupOptions);

Интеграция с CI/CD

При работе с CI/CD (Continuous Integration / Continuous Deployment) важно учитывать тестируемость и стабильность drag-and-drop функционала:

  • Юнит-тестирование: можно тестировать сортировку через создание DOM-элементов в jsdom или аналогичной среде, и проверку их порядка после вызова Sortable#option('onEnd', ...).
  • E2E-тестирование: автоматизация с помощью Cypress или Selenium позволяет имитировать перетаскивание элементов и проверять корректность обновления состояния.
  • Сборка и минификация: SortableJS поддерживает tree-shaking, что облегчает интеграцию в современные сборщики (Webpack, Vite). В CI/CD процессах важно использовать production-сборки с минификацией для ускорения загрузки страниц.
  • Версионирование зависимостей: фиксирование версии SortableJS в package.json предотвращает неожиданное поведение после обновлений.
  • Автоматическая проверка визуального интерфейса: интеграция с визуальными тестами (например, Percy или Chromatic) помогает контролировать корректность отображения списка и анимаций после изменений.

Производительность и оптимизация

  • Виртуальные списки: при работе с большими массивами элементов рекомендуется комбинировать SortableJS с виртуализацией, чтобы избежать потери производительности при рендере.
  • Оптимизация анимаций: параметр animation и CSS-трансформации могут быть использованы для плавного перемещения элементов без перерисовки всего DOM.
  • Обработка событий: для больших списков следует минимизировать тяжелые операции внутри обработчиков событий onEnd и onUpdate.

Расширенные возможности

  • Поддержка touch-событий: встроенная поддержка сенсорных экранов.
  • Сортировка сеток (grid layout): элементы могут перемещаться в двумерной сетке с сохранением визуального порядка.
  • Custom drag image: возможность создавать собственное изображение или элемент, который будет перетаскиваться вместо оригинала.
  • Интеграция с сервером: порядок элементов можно синхронизировать с базой данных через AJAX-запросы в событиях onEnd и onAdd.

SortableJS обеспечивает универсальный и гибкий инструмент для создания динамичных интерфейсов с drag-and-drop функционалом, легко адаптируемый под требования CI/CD процессов и современных веб-приложений.

Оглавление