Справочник API

Вот полный контракт sortable: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.

Входные свойства

Настройте sortable с помощью 13 входных свойств. Привязывайте их, как любой @Input в Angular.

Имя	Тип	По умолчанию	Описание
`hubSortable`Обязательно	`T[] \| FormArray \| WritableSignal<T[]>`	—	Данные, привязанные к сортируемому контейнеру: обычный массив, реактивный `FormArray` или записываемый сигнал. Остаётся синхронизированным с операциями перетаскивания.
`options`	`Options`	—	Полный объект опций SortableJS. Любую опцию SortableJS также можно привязать напрямую как отдельный input (например `handle`, `animation` или `group`).
`autoUpdateArray`	`boolean`	`true`	При `true` (по умолчанию) директива автоматически изменяет привязанный массив после каждого перетаскивания. Установите `false` для ручного управления и обновляйте массив самостоятельно.
`cloneFunction`	`(item: T) => T`	—	Функция для клонирования элемента, когда группа настроена в режиме `pull: 'clone'`.
`container`	`string`	—	CSS-селектор вложенного элемента, который должен стать сортируемым, когда хост оборачивает реальный список.
`group`	`Options['group']`	—	Имя группы или объект конфигурации для соединения нескольких списков и управления тем, какие из них могут отдавать или получать элементы.
`sort`	`boolean`	—	Включает или отключает изменение порядка элементов внутри списка.
`handle`	`string`	—	CSS-селектор элемента внутри каждого пункта, который запускает перетаскивание, оставляя остальное интерактивным.
`draggable`	`string`	—	CSS-селектор, ограничивающий, какие дочерние элементы можно перетаскивать.
`filter`	`string \| ((event, target, sortable) => boolean)`	—	CSS-селектор (или предикат), отмечающий элементы, которые нельзя перетаскивать.
`disabled`	`boolean`	—	Отключает поведение сортировки без удаления директивы.
`animation`	`number`	—	Длительность анимации переупорядочивания в миллисекундах.
`ghostClass`	`string`	—	CSS-класс, применяемый к заполнителю, отображаемому во время перетаскивания.

События

Реагируйте на то, что делает sortable, — 13 событий, к которым можно подключить вашу логику.

Имя	Тип	Описание
`init`	`Sortable`	Возникает после создания базового экземпляра SortableJS.
`start`	`SortableEvent`	Возникает в начале операции перетаскивания.
`end`	`SortableEvent`	Возникает в конце операции перетаскивания, независимо от результата.
`add`	`SortableEvent`	Возникает, когда элемент перемещается в этот список из другого.
`update`	`SortableEvent`	Возникает, когда элемент меняет позицию внутри того же списка.
`sortEvent`	`SortableEvent`	Возникает при любом изменении порядка списка (после `add` или `update`).
`remove`	`SortableEvent`	Возникает, когда элемент покидает этот список в направлении другого.
`filterEvent`	`SortableEvent`	Возникает при попытке перетащить отфильтрованный (неперетаскиваемый) элемент.
`change`	`SortableEvent`	Возникает, когда список изменяется из-за добавления или удаления.
`choose`	`SortableEvent`	Возникает при выборе элемента (нажатие указателя).
`unchoose`	`SortableEvent`	Возникает, когда элемент отпускают без перетаскивания.
`clone`	`SortableEvent`	Возникает при клонировании элемента в режиме клонирования.
`move`	`SortableMoveEventPayload`	Возникает непрерывно во время перетаскивания; возвращаемое значение может определять, разрешено ли перемещение.

Шаблоны

Шаблоны пока не задокументированы.

CSS-переменные

CSS-переменные пока не задокументированы.

Стилизация и тематизация

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