option для изменения настроек

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

Основные опции

group Определяет принадлежность элементов к группе для возможности перетаскивания между списками. Может быть строкой или объектом. Пример объекта:

group: {
    name: "shared",
    pull: true, // позволяет перетаскивать элементы из этого списка
    put: false  // запрещает принимать элементы из других списков
}

sort Булева опция, включающая или запрещающая сортировку внутри списка. По умолчанию true.

disabled Позволяет полностью отключить возможность перетаскивания. При значении true элементы становятся статичными.

handle CSS-селектор, указывающий область внутри элемента, за которую можно его перемещать. Это удобно для сложных карточек с кнопками и интерактивными элементами.

handle: ".drag-handle"

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

draggable: ".sortable-item"

animation Время анимации перестановки элементов в миллисекундах. Дает визуальный эффект плавного перемещения.

animation: 150

Продвинутые опции

ghostClass CSS-класс, применяемый к элементу, который визуально “отрывается” при перетаскивании. Можно использовать для стилизации тени или прозрачности.

chosenClass Класс, который применяется к элементу при его выборе для перетаскивания. Обычно используется для визуального выделения активного элемента.

dragClass Применяется к элементу во время перетаскивания, помогает создавать эффект движения или прозрачности.

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

filter: ".no-drag",
preventOnFilter: false

swapThreshold Порог для активации перестановки элементов при использовании режима swap. Значение от 0 до 1, определяет процент перекрытия, при котором происходит замена.

invertSwap Булева опция, определяющая направление swap при активации.

multiDrag и selectedClass Позволяют выделять сразу несколько элементов и перемещать их группой. selectedClass задает CSS-класс для выделенных элементов.

multiDrag: true,
selectedClass: "selected"

Обработка событий с опциями

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

  • onStart — срабатывает при начале перетаскивания элемента.
  • onEnd — срабатывает после завершения операции.
  • onAdd — элемент был добавлен в список (важно для групп).
  • onUpdate — элемент был перемещен внутри списка.
  • onRemove — элемент был удален из списка.
  • onSort — общий триггер при любом изменении позиции элемента.

События получают объект события с доступом к элементу (evt.item), родительскому списку (evt.from), новому списку (evt.to) и позиции (evt.oldIndex, evt.newIndex). Это позволяет создавать сложную логику сортировки и синхронизации с данными.

Динамическое изменение опций

SortableJS позволяет изменять большинство опций после инициализации через метод option.

sortable.option("disabled", true);
sortable.option("animation", 300);

Можно также добавлять обработчики событий динамически или изменять группы без пересоздания экземпляра. Это позволяет гибко управлять интерфейсом и изменять поведение элементов в зависимости от состояния приложения.

Практические рекомендации

  • Для списков с большим количеством элементов рекомендуется использовать animation с коротким временем, чтобы не перегружать интерфейс.
  • При сложных карточках с кнопками обязательно указывать handle, чтобы предотвратить случайное срабатывание сортировки.
  • Опция filter помогает исключить интерактивные элементы, например кнопки или ссылки, без отключения сортировки для всего списка.
  • Использование group открывает возможности для реализации drag-and-drop между разными списками и синхронизации данных.

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

Оглавление