Полный список опций

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

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

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

• name — имя группы.
• pull — определяет, можно ли вытаскивать элементы из списка (true, false, 'clone').
• put — определяет, можно ли вставлять элементы в список (true, false, массив имен групп).

sort true или false. Определяет, можно ли сортировать элементы внутри списка.

disabled true или false. Полностью отключает функциональность перетаскивания для списка.

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

draggable CSS-селектор элементов, которые можно перетаскивать. Например, .item для всех элементов с классом item.

ghostClass Класс, который применяется к элементу при перетаскивании. Позволяет стилизовать “призрак” элемента.

chosenClass Класс, добавляемый к элементу в момент его выбора (клик и удержание мыши).

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

animation Число в миллисекундах, задающее длительность анимации при перемещении элементов. Например, 150 создаст плавное смещение элементов.

fallbackOnBody true или false. Определяет, будет ли элемент при перетаскивании помещён в body (полезно при ограничениях CSS контейнера).

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

invertSwap true или false. Меняет направление обмена элементами при перекрытии.

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

preventOnFilter true или false. Определяет, следует ли предотвращать событие по умолчанию для элементов, подпадающих под filter.

multiDrag true или false. Включает возможность множественного выделения элементов для перетаскивания.

selectedClass Класс, применяемый к выделенным элементам при использовании множественного выбора (multiDrag).

fallbackTolerance Число в пикселях. Минимальное смещение курсора для начала перетаскивания на устройствах без полноценной поддержки drag-and-drop.

forceFallback true или false. Принудительное использование fallback-драггинга вместо нативного.

События

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

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

Каждое событие получает объект evt с полезными свойствами:

• evt.item — элемент, над которым происходит действие.
• evt.from — родительский список перед перемещением.
• evt.to — родительский список после перемещения.
• evt.oldIndex — индекс элемента до перемещения.
• evt.newIndex — индекс элемента после перемещения.

Дополнительные опции

• scroll — true или false. Автопрокрутка контейнера при приближении курсора к краю.
• scrollSensitivity — число, определяющее отступ в пикселях, при котором запускается прокрутка.
• scrollSpeed — скорость автопрокрутки в пикселях за интервал.
• setData — функция для задания данных при drag-and-drop (используется для drag-and-drop HTML5).
• fallbackOffset — смещение для элемента при fallback-перетаскивании.

Опции для гибкой настройки

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

• Ограничение перетаскивания только по определённым элементам (handle).
• Создание списков с разными правилами для каждой группы (group, put, pull).
• Анимация и стилизация элементов с помощью CSS-классов (ghostClass, chosenClass, dragClass).
• Множественное выделение и перенос группы элементов (multiDrag, selectedClass).

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