API-Referenz

Hier ist der vollständige Vertrag für sortable: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.

Inputs

Stelle sortable mit 13 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`hubSortable`Erforderlich	`T[] \| FormArray \| WritableSignal<T[]>`	—	An den sortierbaren Container gebundene Daten: ein einfaches Array, ein reaktives `FormArray` oder ein beschreibbares Signal. Bleibt mit Drag-and-Drop-Operationen synchron.
`options`	`Options`	—	Vollständiges SortableJS-Optionsobjekt. Jede SortableJS-Option kann auch direkt als eigener Input gebunden werden (zum Beispiel `handle`, `animation` oder `group`).
`autoUpdateArray`	`boolean`	`true`	Bei `true` (Standard) ändert die Direktive das gebundene Array nach jedem Ziehen automatisch. Auf `false` setzen für manuelle Kontrolle und das Array selbst aktualisieren.
`cloneFunction`	`(item: T) => T`	—	Funktion zum Klonen eines Elements, wenn die Gruppe im Modus `pull: 'clone'` konfiguriert ist.
`container`	`string`	—	CSS-Selektor des verschachtelten Elements, das sortierbar werden soll, wenn der Host die eigentliche Liste umschließt.
`group`	`Options['group']`	—	Gruppenname oder Konfigurationsobjekt, um mehrere Listen zu verbinden und zu steuern, welche Elemente abgeben oder empfangen dürfen.
`sort`	`boolean`	—	Aktiviert oder deaktiviert das Umsortieren von Elementen innerhalb der Liste.
`handle`	`string`	—	CSS-Selektor des Elements innerhalb jedes Items, das das Ziehen startet, während der Rest interaktiv bleibt.
`draggable`	`string`	—	CSS-Selektor, der einschränkt, welche Kindelemente gezogen werden können.
`filter`	`string \| ((event, target, sortable) => boolean)`	—	CSS-Selektor (oder Prädikat), der nicht ziehbare Elemente kennzeichnet.
`disabled`	`boolean`	—	Deaktiviert das Sortierverhalten, ohne die Direktive zu entfernen.
`animation`	`number`	—	Dauer der Umsortierungsanimation in Millisekunden.
`ghostClass`	`string`	—	CSS-Klasse, die auf den während des Ziehens angezeigten Platzhalter angewendet wird.

Outputs

Reagiere darauf, was sortable tut — 13 Events, an die du deine Logik anknüpfen kannst.

Name	Typ	Beschreibung
`init`	`Sortable`	Wird ausgelöst, sobald die zugrunde liegende SortableJS-Instanz erstellt wurde.
`start`	`SortableEvent`	Wird beim Start eines Ziehvorgangs ausgelöst.
`end`	`SortableEvent`	Wird am Ende eines Ziehvorgangs ausgelöst, unabhängig vom Ergebnis.
`add`	`SortableEvent`	Wird ausgelöst, wenn ein Element aus einer anderen Liste in diese abgelegt wird.
`update`	`SortableEvent`	Wird ausgelöst, wenn ein Element seine Position innerhalb derselben Liste ändert.
`sortEvent`	`SortableEvent`	Wird ausgelöst, wenn sich die Listenreihenfolge ändert (nach `add` oder `update`).
`remove`	`SortableEvent`	Wird ausgelöst, wenn ein Element diese Liste in Richtung einer anderen verlässt.
`filterEvent`	`SortableEvent`	Wird ausgelöst, wenn versucht wird, ein gefiltertes (nicht ziehbares) Element zu ziehen.
`change`	`SortableEvent`	Wird ausgelöst, wenn sich die Liste durch Hinzufügen oder Entfernen ändert.
`choose`	`SortableEvent`	Wird ausgelöst, wenn ein Element ausgewählt wird (Zeiger gedrückt).
`unchoose`	`SortableEvent`	Wird ausgelöst, wenn ein Element losgelassen wird, ohne gezogen worden zu sein.
`clone`	`SortableEvent`	Wird ausgelöst, wenn ein Element im Klonmodus geklont wird.
`move`	`SortableMoveEventPayload`	Wird während des Ziehens fortlaufend ausgelöst; der Rückgabewert kann steuern, ob die Bewegung erlaubt ist.

Templates

Noch keine Templates dokumentiert.

CSS-Variablen

Noch keine CSS-Variablen dokumentiert.

Styling und Theming

Es sind noch keine Styling-Beispiele dokumentiert. Dieser Abschnitt wird Anpassungsrezepte und Theming-Beispiele enthalten.