API reference

Here's the full contract for sortable: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.

Inputs

Dial sortable in with 13 inputs. Bind them like any Angular @Input.

Name	Type	Default	Description
`hubSortable`Required	`T[] \| FormArray \| WritableSignal<T[]>`	—	Data bound to the sortable container — a plain array, a reactive `FormArray` or a writable signal. Stays in sync with drag-and-drop operations.
`options`	`Options`	—	Full SortableJS options object. Every SortableJS option can also be bound directly as its own input (for example `handle`, `animation` or `group`).
`autoUpdateArray`	`boolean`	`true`	When `true` (default) the directive mutates the bound array automatically after each drag. Set it to `false` for manual control and update the array yourself.
`cloneFunction`	`(item: T) => T`	—	Factory used to clone an item when the group is configured in `pull: 'clone'` mode.
`container`	`string`	—	CSS selector of the nested element that should become sortable when the host wraps the actual list.
`group`	`Options['group']`	—	Group name or configuration object used to connect several lists and control which ones can give or receive items.
`sort`	`boolean`	—	Enables or disables reordering of items within the list.
`handle`	`string`	—	CSS selector of the element inside each item that starts the drag, leaving the rest interactive.
`draggable`	`string`	—	CSS selector that restricts which child elements can be dragged.
`filter`	`string \| ((event, target, sortable) => boolean)`	—	CSS selector (or predicate) marking elements that cannot be dragged.
`disabled`	`boolean`	—	Disables the sortable behaviour without removing the directive.
`animation`	`number`	—	Duration in milliseconds of the reordering animation.
`ghostClass`	`string`	—	CSS class applied to the drop placeholder shown while dragging.

Outputs

React to what sortable does — 13 events to hook your logic onto.

Name	Type	Description
`init`	`Sortable`	Emitted once the underlying SortableJS instance has been created.
`start`	`SortableEvent`	Emitted when a drag operation starts.
`end`	`SortableEvent`	Emitted when a drag operation ends, regardless of the result.
`add`	`SortableEvent`	Emitted when an item is dropped into this list from another one.
`update`	`SortableEvent`	Emitted when an item changes position within the same list.
`sortEvent`	`SortableEvent`	Emitted whenever the list order changes (after `add` or `update`).
`remove`	`SortableEvent`	Emitted when an item leaves this list towards another one.
`filterEvent`	`SortableEvent`	Emitted when a filtered (non-draggable) item is attempted to be dragged.
`change`	`SortableEvent`	Emitted when the list changes due to an add or remove operation.
`choose`	`SortableEvent`	Emitted when an item is chosen (pointer down).
`unchoose`	`SortableEvent`	Emitted when an item is released without being dragged.
`clone`	`SortableEvent`	Emitted when an item is cloned in clone mode.
`move`	`SortableMoveEventPayload`	Emitted continuously while dragging; its return value can control whether the move is allowed.

Templates

No templates documented yet.

CSS variables

No CSS variables documented yet.

Styling and theming

No styling examples are documented yet. This section will include customization recipes and theming examples.