Канбан-доска

SortableJS — это легковесная библиотека на JavaScript для реализации перетаскивания элементов (drag-and-drop) внутри списков и между ними. Она не требует сторонних зависимостей и поддерживает современные браузеры. Основные возможности включают:

  • Перетаскивание элементов внутри одного списка. Позволяет изменять порядок элементов с помощью мыши или касаний на мобильных устройствах.
  • Перетаскивание между списками. Элементы можно перемещать между разными контейнерами, сохраняя при этом логику сортировки.
  • Поддержка сенсорных экранов. Библиотека корректно работает на устройствах с touch-интерфейсом.
  • События и обратные вызовы. Полный набор событий для отслеживания начала перетаскивания, его окончания, изменения порядка и перемещения элементов.
  • Кастомизация внешнего вида при перетаскивании. Возможность изменять стиль переносимого элемента и контейнера во время drag-and-drop.

Инициализация SortableJS

Для создания интерактивного списка необходимо подключить библиотеку через CDN или npm. После подключения создаётся экземпляр Sortable для контейнера с элементами:

const kanbanColumn = document.getElementById('todo-list');

const sortable = new Sortable(kanbanColumn, {
    animation: 150,
    ghostClass: 'sortable-ghost',
    chosenClass: 'sortable-chosen',
    dragClass: 'sortable-drag'
});

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

  • animation — задаёт длительность анимации при перемещении элементов в миллисекундах.
  • ghostClass — CSS-класс для элемента-призрака, который отображается во время перетаскивания.
  • chosenClass — класс для выделенного элемента в момент захвата.
  • dragClass — класс элемента во время фактического перемещения.

Работа с несколькими колонками

SortableJS позволяет легко объединять несколько списков для реализации канбан-доски. Для этого используется параметр group, который задаёт имя группы и определяет поведение при перемещении элементов между контейнерами:

const todoList = document.getElementById('todo-list');
const inProgressList = document.getElementById('in-progress-list');

Sortable.create(todoList, {
    group: 'kanban',
    animation: 150
});

Sortable.create(inProgressList, {
    group: 'kanban',
    animation: 150
});

Особенности группировки:

  • Элементы можно перемещать только между контейнерами одной группы.

  • Параметры pull и put позволяют управлять доступностью перетаскивания:

    • pull: true — разрешает вынимать элементы из контейнера.
    • put: false — запрещает помещать элементы в контейнер.

События для отслеживания действий

SortableJS предоставляет богатый набор событий для гибкой логики работы канбан-доски. Основные события:

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

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

sortable.option("onEnd", function (evt) {
    console.log(`Элемент ${evt.item.textContent} перемещён`);
    console.log(`Новый индекс: ${evt.newIndex}`);
});

Настройка перетаскиваемых элементов

SortableJS поддерживает фильтры и ограничения на элементы, которые можно перетаскивать:

Sortable.create(todoList, {
    filter: '.non-draggable',
    draggable: '.draggable',
    animation: 150
});
  • filter — задаёт селекторы элементов, которые нельзя перетаскивать.
  • draggable — определяет, какие элементы можно перетаскивать внутри контейнера.

Дополнительно можно управлять поведением с помощью handle — элемента, за который разрешено захватывать карточку:

Sortable.create(todoList, {
    handle: '.drag-handle'
});

Интеграция с хранением данных

Для динамических канбан-досок важно сохранять порядок карточек. После каждого изменения можно обновлять структуру данных, например, в массиве:

const tasks = ['Задача 1', 'Задача 2', 'Задача 3'];

sortable.option("onUpdate", function (evt) {
    const movedItem = tasks.splice(evt.oldIndex, 1)[0];
    tasks.splice(evt.newIndex, 0, movedItem);
    console.log(tasks);
});

При перемещении между колонками можно использовать событие onAdd для переноса элемента между разными массивами, соответствующими спискам.

Кастомизация внешнего вида

Для создания визуально привлекательной доски используется CSS вместе с классами, которые задаются через опции библиотеки:

.sortable-ghost {
    opacity: 0.4;
    border: 2px dashed #ccc;
}

.sortable-chosen {
    background-color: #f0f0f0;
}

.sortable-drag {
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

Использование этих стилей позволяет выделять выбранный элемент, визуально показывать его перемещение и создавать эффект “плавающей карточки” при drag-and-drop.

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

SortableJS эффективен даже при больших списках. Рекомендации по оптимизации:

  • Ограничить количество DOM-операций внутри обработчиков событий.
  • Использовать CSS-анимации вместо JavaScript-анимаций, где возможно.
  • Для списков с сотнями элементов применять виртуализацию или lazy-rendering карточек.
  • Подключать библиотеку через CDN с поддержкой кеширования для ускорения загрузки страницы.

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

SortableJS поддерживает:

  • Swap Mode — изменение позиции элементов без визуального перемещения.
  • Multi-drag — одновременное перемещение нескольких элементов.
  • Auto-scroll — автоматическая прокрутка контейнера при перетаскивании к краю.
  • Custom drag image — возможность задать собственное изображение для перетаскиваемого элемента.

Эти функции позволяют создавать полноценные канбан-доски с высокой интерактивностью, удобным интерфейсом и гибкой логикой управления задачами.

Оглавление