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

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

Элемент и контейнер

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

  • name — имя группы.
  • pull — возможность «выносить» элементы из текущего списка. Может быть true, false или "clone".
  • put — возможность принимать элементы из других списков. Может быть true, false или массив с именами разрешенных групп.

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

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

filter Селектор или функция для элементов, которые не должны быть перетаскиваемыми. При попытке перетаскивания таких элементов генерируется событие onFilter.

Настройка поведения

sort Логическое значение, определяющее возможность сортировки элементов внутри одного контейнера. Если false, элементы можно только переносить между списками.

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

ghostClass CSS-класс, который применяется к клону элемента во время перетаскивания. Обычно используется для стилизации «призрачного» элемента.

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

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

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

invertSwap Логическое значение, влияющее на направление перестановки при использовании swap. Если true, элементы меняются местами в противоположном порядке.

События

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

  • onStart — вызывается при начале перетаскивания.
  • onEnd — вызывается после завершения перетаскивания, даже если элемент не был перемещен.
  • onAdd — срабатывает, когда элемент добавлен из другого списка.
  • onUpdate — срабатывает, когда элемент изменил позицию внутри списка.
  • onRemove — вызывается при удалении элемента из списка.
  • onFilter — срабатывает при попытке перетащить элемент, который соответствует фильтру.
  • onMove — возвращает true или false, разрешая или запрещая перемещение элемента в конкретную позицию.

Дополнительные настройки

disabled Отключает возможность сортировки. Полезно для временной блокировки перетаскивания без удаления обработчиков событий.

forceFallback Логическое значение, заставляющее использовать fallback-метод Drag and Drop вместо нативного HTML5 DnD. Рекомендуется для старых браузеров или специфичных сценариев.

fallbackClass CSS-класс для элемента во время использования fallback-перетаскивания. Позволяет отдельно стилизовать элементы при fallback.

fallbackOnBody Логическое значение, определяющее, будет ли элемент fallback добавляться в <body> вместо родительского контейнера. Упрощает работу с ограниченными контейнерами и overflow.

scroll Включает автоматическую прокрутку контейнера или страницы при перетаскивании элемента к границе. Значение true активирует стандартную прокрутку.

scrollSensitivity Расстояние в пикселях до края контейнера, при котором начинается прокрутка.

scrollSpeed Скорость прокрутки при перетаскивании элемента к границе контейнера.

Примеры сочетаний опций

  1. Перетаскивание элементов между списками с разными группами:
Sortable.create(listA, {
    group: { name: 'shared', pull: 'clone', put: false },
    animation: 150,
    sort: true
});
Sortable.create(listB, {
    group: 'shared',
    animation: 150,
    sort: true
});
  1. Элементы с ограниченной областью захвата:
Sortable.create(list, {
    handle: '.drag-handle',
    draggable: '.item',
    animation: 200
});
  1. Использование фильтра для запрета перемещения определенных элементов:
Sortable.create(list, {
    filter: '.non-draggable',
    onFilter: function (evt) {
        console.log('Попытка перетащить заблокированный элемент', evt.item);
    }
});

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

Оглавление