Справочник API

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

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

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

Имя	Тип	По умолчанию	Описание
`hubSortable`	`SortableData<T> \| SortableBindings`	—	Данные, связанные с сортируемым контейнером: массив, реактивный `FormArray` или записываемый сигнал. Остаются в синхроне с перетаскиванием. Необязателен: голый атрибут `hubSortable` тоже включает директиву, и тогда выходы сообщают о каждом перемещении, ничего не изменяя.
`options`	`Options`	—	Полный объект опций SortableJS. Любую опцию SortableJS также можно привязать напрямую как отдельный input (например `handle`, `animation` или `group`).
`autoUpdateArray`	`boolean`	`true`	При `true` (по умолчанию) директива автоматически изменяет привязанный массив после каждого перетаскивания. Установите `false` для ручного управления и обновляйте массив самостоятельно.
`cloneFunction`	`(item: T) => T`	—	Функция для клонирования элемента, когда группа настроена в режиме `pull: 'clone'`.
`container`	`string`	—	CSS-селектор вложенного элемента, который должен стать сортируемым, когда хост оборачивает реальный список.
`keyboardSorting`	`boolean`	`true`	Переупорядочивание с клавиатуры, включено по умолчанию. Каждый элемент становится точкой табуляции: `Enter` или `Пробел` берёт его, стрелки перемещают, `Home` и `End` отправляют к краям, а `Escape` возвращает на место. Установите `false`, если приложение предоставляет собственный клавиатурный путь.
`keyboardMessages`	`Partial<SortableKeyboardMessages>`	—	Заменяет фразы, которые переупорядочивание с клавиатуры объявляет через живую область. Всё, что не указано, сохраняет английский текст по умолчанию.
`group`	`Options['group']`	—	Имя группы или объект конфигурации для соединения нескольких списков и управления тем, какие из них могут отдавать или получать элементы.
`sort`	`boolean`	—	Включает или отключает изменение порядка элементов внутри списка.
`delay`	`number`	—	Сколько миллисекунд нужно удерживать указатель, прежде чем начнётся перетаскивание. По умолчанию `0`; увеличьте на сенсорных экранах, чтобы короткое нажатие прокручивало, а не тащило.
`disabled`	`boolean`	—	Отключает поведение сортировки без удаления директивы.
`draggable`	`string`	—	CSS-селектор, ограничивающий, какие дочерние элементы можно перетаскивать.
`handle`	`string`	—	CSS-селектор элемента внутри каждого пункта, который запускает перетаскивание, оставляя остальное интерактивным.
`animation`	`number`	—	Длительность анимации переупорядочивания в миллисекундах.
`ghostClass`	`string`	—	CSS-класс, применяемый к заполнителю, отображаемому во время перетаскивания.
`chosenClass`	`string`	—	CSS-класс, который висит на элементе с момента выбора и до конца перетаскивания. По умолчанию `sortable-chosen`.
`dragClass`	`string`	—	CSS-класс элемента, который следует за указателем во время перетаскивания. По умолчанию `sortable-drag`.
`fallbackOnBody`	`boolean`	—	Помещает превью перетаскивания в `document.body`, а не в список, чтобы предок с `overflow: hidden` его не обрезал.
`fallbackTolerance`	`number`	—	Сколько пикселей должен пройти указатель, прежде чем начнётся запасное перетаскивание. По умолчанию `0`; увеличьте, чтобы касание не считалось перетаскиванием.
`fallbackClass`	`string`	—	CSS-класс клона-превью, который используется, когда нативный HTML5 drag-and-drop обходится.
`fallbackOffset`	`{ x: number; y: number }`	—	Смещение запасного превью перетаскивания в пикселях относительно указателя.
`forceFallback`	`boolean`	—	Не использует нативный HTML5 drag-and-drop и всегда тащит клон — он выглядит одинаково во всех браузерах.
`filter`	`string \| ((event, target, sortable) => boolean)`	—	CSS-селектор (или предикат), отмечающий элементы, которые нельзя перетаскивать.
`preventOnFilter`	`boolean`	—	Вызывает `preventDefault()` для события, которое сработало на `filter`. По умолчанию `true`; отключите, если отфильтрованный элемент — это контрол, которому нужен собственный клик.
`direction`	`'vertical' \| 'horizontal' \| ((event, target, dragEl) => 'vertical' \| 'horizontal')`	—	Ось, вдоль которой выложен список. Определяется автоматически, если не задана; для сеток и списков с переносом задавайте явно — автоопределение там ошибается.
`swapThreshold`	`number`	—	Доля целевого элемента (от 0 до 1), которую должен покрыть указатель до обмена местами. По умолчанию `1`; меньшие значения меняют раньше.
`invertSwap`	`boolean`	—	Всегда использует инвертированную зону обмена: обмен происходит, когда указатель покидает элемент, а не когда входит в него.
`invertedSwapThreshold`	`number`	—	Порог, действующий при инвертированной зоне обмена. Если не задан, берётся `swapThreshold`.
`removeCloneOnHide`	`boolean`	—	Убирает клон из DOM, пока он скрыт, вместо того чтобы просто прятать его. По умолчанию `true`.
`ignore`	`string`	—	CSS-селектор элементов внутри пункта, которые никогда не должны начинать перетаскивание, — полей ввода, ссылок.
`touchStartThreshold`	`number`	—	Сколько пикселей может пройти палец до отмены отложенного перетаскивания — граница между перетаскиванием и прокруткой.
`emptyInsertThreshold`	`number`	—	Расстояние в пикселях до пустого списка, на котором перетаскиваемый элемент в него вставляется. По умолчанию `5`; при `0` указатель должен быть внутри списка.
`dropBubble`	`boolean`	—	Позволяет событию drop всплывать дальше к элементам-предкам.
`dragoverBubble`	`boolean`	—	Позволяет событию dragover всплывать дальше к элементам-предкам.
`dataIdAttr`	`string`	—	HTML-атрибут, который `Sortable.toArray()` и `store` читают как идентификатор каждого элемента. По умолчанию `data-id`.
`delayOnTouchOnly`	`boolean`	—	Применяет `delay` только к сенсорному вводу — мышью перетаскивание по-прежнему начинается сразу.
`easing`	`string`	—	CSS-функция плавности для анимации переупорядочивания, например `cubic-bezier(1, 0, 0, 1)`.
`setData`	`(dataTransfer: DataTransfer, draggedElement: HTMLElement) => void`	—	Вызывается в начале перетаскивания, чтобы записать данные в нативный `DataTransfer` — точка подключения для перетаскивания за пределы страницы.
`store`	`{ get: (sortable: Sortable) => string[]; set: (sortable: Sortable) => void }`	—	Пара колбэков `get`/`set` для сохранения порядка и восстановления его при следующей загрузке; ключом служит `dataIdAttr`.

События

Реагируйте на то, что делает 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`	Возникает непрерывно во время перетаскивания; возвращаемое значение может определять, разрешено ли перемещение.

Шаблоны

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