Кастомные CSS-классы

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

Основные CSS-классы

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

  • sortable-chosen — присваивается элементу, который в данный момент выбран для перетаскивания. Этот класс полезен для визуальной индикации активного элемента.
  • sortable-drag — применяется к элементу в процессе перемещения. С его помощью можно задавать прозрачность, тени, масштаб или анимации движения.
  • sortable-ghost — используется для призрачного следа элемента, который остаётся на месте исходного объекта во время перетаскивания.
  • sortable-fallback — появляется при срабатывании fallback-режима, когда стандартное поведение drag’n’drop недоступно.
  • sortable-anim — активируется для элементов, участвующих в анимации перестановки внутри контейнера.

Настройка классов через опции

При создании нового экземпляра SortableJS можно указать свои классы через объект classes. Это позволяет полностью контролировать стили элементов без изменения глобальных CSS.

const sortable = new Sortable(listElement, {
  animation: 150,
  chosenClass: 'custom-chosen',
  dragClass: 'custom-drag',
  ghostClass: 'custom-ghost',
  fallbackClass: 'custom-fallback'
});
  • chosenClass — заменяет стандартный sortable-chosen.
  • dragClass — заменяет sortable-drag.
  • ghostClass — заменяет sortable-ghost.
  • fallbackClass — заменяет sortable-fallback.

Использование своих классов позволяет интегрировать библиотеку в существующий дизайн без конфликтов со стандартными стилями.

Динамическое управление классами

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

  • onChoose(evt) — срабатывает при выборе элемента для перетаскивания.
  • onStart(evt) — при начале перемещения.
  • onEnd(evt) — по завершении drag’n’drop.
  • onAdd(evt) и onUpdate(evt) — при изменении порядка или добавлении элемента.

Пример динамического изменения цвета выбранного элемента:

const sortable = new Sortable(listElement, {
  onChoose: function(evt) {
    evt.item.style.backgroundColor = '#f0f0f0';
  },
  onEnd: function(evt) {
    evt.item.style.backgroundColor = '';
  }
});

Работа с ghost и drag элементами

Элементы ghost и drag не просто декоративные, они обеспечивают визуальный контроль перемещения:

  • ghost — помогает отслеживать позицию, сохраняя место для элемента в списке.
  • drag — может использоваться для трансформаций: масштабирование, поворот, добавление тени или анимации.

Пример с CSS-анимацией:

.custom-drag {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.custom-ghost {
  opacity: 0.5;
  border: 2px dashed #aaa;
}

Интеграция с библиотеками анимаций

SortableJS можно использовать совместно с CSS-анимациями и сторонними библиотеками, например, Animate.css или GreenSock (GSAP). При этом кастомные классы позволяют точно контролировать, какой элемент и в какой момент анимируется, исключая лишние срабатывания.

Особенности использования

  1. Переопределение стандартных стилей — необходимо учитывать каскадность CSS. Классы SortableJS добавляются динамически, поэтому важно использовать достаточную специфичность или !important при необходимости.
  2. Производительность — применение сложных анимаций к большому количеству элементов может замедлять интерфейс. Оптимально ограничивать эффекты drag и ghost к ключевым элементам.
  3. Совместимость с touch-сенсорными устройствами — классы работают одинаково на мобильных, но следует проверять, чтобы визуальные эффекты не мешали взаимодействию пальцем.

Итоговые рекомендации

  • Использовать собственные классы вместо глобальной модификации стандартных.
  • Обрабатывать события onChoose, onStart, onEnd для динамического управления стилями.
  • Настраивать визуальные эффекты для drag и ghost, чтобы улучшить пользовательский опыт.
  • Следить за производительностью при применении сложных трансформаций и анимаций.

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

Оглавление