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 39 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`hubSortable`	`SortableData<T> \| SortableBindings`	—	Daten, die an den sortierbaren Container gebunden sind — ein Array, ein reaktives `FormArray` oder ein beschreibbares Signal. Bleibt mit den Drag-and-drop-Operationen synchron. Optional: Auch das bloße Attribut `hubSortable` aktiviert die Direktive; die Outputs melden dann jede Bewegung, ohne dass etwas verändert wird.
`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.
`keyboardSorting`	`boolean`	`true`	Neuordnung per Tastatur, standardmäßig aktiv. Jedes Element wird zum Tabstopp: `Enter` oder `Leertaste` greift es, die Pfeiltasten verschieben es, `Pos1` und `Ende` schicken es an die Ränder und `Escape` setzt es zurück. Auf `false` setzen, wenn die Anwendung einen eigenen Tastaturweg mitbringt.
`keyboardMessages`	`Partial<SortableKeyboardMessages>`	—	Ersetzt die Sätze, die die Tastatur-Neuordnung über ihre Live-Region ansagt. Was nicht angegeben wird, behält seinen englischen Standardtext.
`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.
`delay`	`number`	—	Millisekunden, die der Zeiger gedrückt bleiben muss, bevor ein Ziehen beginnen darf. Standard `0`; auf Touch-Geräten erhöhen, damit ein kurzer Druck scrollt statt zu ziehen.
`disabled`	`boolean`	—	Deaktiviert das Sortierverhalten, ohne die Direktive zu entfernen.
`draggable`	`string`	—	CSS-Selektor, der einschränkt, welche Kindelemente gezogen werden können.
`handle`	`string`	—	CSS-Selektor des Elements innerhalb jedes Items, das das Ziehen startet, während der Rest interaktiv bleibt.
`animation`	`number`	—	Dauer der Umsortierungsanimation in Millisekunden.
`ghostClass`	`string`	—	CSS-Klasse, die auf den während des Ziehens angezeigten Platzhalter angewendet wird.
`chosenClass`	`string`	—	CSS-Klasse, die dem Element vom Auswählen bis zum Ende des Ziehens zugewiesen wird. Standard `sortable-chosen`.
`dragClass`	`string`	—	CSS-Klasse für das Element, das dem Zeiger während des Ziehens folgt. Standard `sortable-drag`.
`fallbackOnBody`	`boolean`	—	Hängt die Ziehvorschau an `document.body` statt an die Liste, damit ein Vorfahre mit `overflow: hidden` sie nicht abschneidet.
`fallbackTolerance`	`number`	—	Pixel, die der Zeiger zurücklegen muss, bevor das Ersatz-Ziehen startet. Standard `0`; erhöhen, damit ein Tippen nicht als Ziehen gilt.
`fallbackClass`	`string`	—	CSS-Klasse für das geklonte Vorschauelement, das verwendet wird, wenn das native HTML5-Drag-and-Drop umgangen wird.
`fallbackOffset`	`{ x: number; y: number }`	—	Pixelversatz der Ersatz-Ziehvorschau relativ zum Zeiger.
`forceFallback`	`boolean`	—	Ignoriert das native HTML5-Drag-and-Drop und zieht immer einen Klon, der in jedem Browser gleich aussieht.
`filter`	`string \| ((event, target, sortable) => boolean)`	—	CSS-Selektor (oder Prädikat), der nicht ziehbare Elemente kennzeichnet.
`preventOnFilter`	`boolean`	—	Ruft `preventDefault()` für das Ereignis auf, das `filter` ausgelöst hat. Standard `true`; abschalten, wenn das gefilterte Element ein Bedienelement ist, das seinen Klick noch braucht.
`direction`	`'vertical' \| 'horizontal' \| ((event, target, dragEl) => 'vertical' \| 'horizontal')`	—	Achse, entlang der die Liste angeordnet ist. Wird automatisch erkannt, wenn nicht gesetzt; bei Rastern und umbrechenden Listen explizit setzen, dort kann die Erkennung danebenliegen.
`swapThreshold`	`number`	—	Anteil des Zielelements (0 bis 1), den der Zeiger überdecken muss, damit getauscht wird. Standard `1`; kleinere Werte tauschen früher.
`invertSwap`	`boolean`	—	Verwendet immer die invertierte Tauschzone: Getauscht wird, wenn der Zeiger ein Element verlässt, statt wenn er es betritt.
`invertedSwapThreshold`	`number`	—	Schwellwert, der bei invertierter Tauschzone gilt. Ohne Angabe wird `swapThreshold` verwendet.
`removeCloneOnHide`	`boolean`	—	Entfernt den Klon aus dem DOM, solange er verborgen ist, statt ihn nur auszublenden. Standard `true`.
`ignore`	`string`	—	CSS-Selektor für Elemente innerhalb eines Eintrags, die nie ein Ziehen auslösen dürfen, etwa Eingabefelder oder Links.
`touchStartThreshold`	`number`	—	Pixel, die der Finger sich bewegen darf, bevor ein verzögertes Ziehen abgebrochen wird — der Spielraum zwischen Ziehen und Scrollen.
`emptyInsertThreshold`	`number`	—	Abstand in Pixeln zu einer leeren Liste, ab dem das gezogene Element dort eingefügt wird. Standard `5`; bei `0` muss der Zeiger in der Liste sein.
`dropBubble`	`boolean`	—	Lässt das Drop-Ereignis weiter zu den Vorfahrenelementen aufsteigen.
`dragoverBubble`	`boolean`	—	Lässt das Dragover-Ereignis weiter zu den Vorfahrenelementen aufsteigen.
`dataIdAttr`	`string`	—	HTML-Attribut, das `Sortable.toArray()` und `store` als Id jedes Eintrags lesen. Standard `data-id`.
`delayOnTouchOnly`	`boolean`	—	Wendet `delay` nur auf Toucheingaben an, sodass ein Ziehen mit der Maus weiterhin sofort beginnt.
`easing`	`string`	—	CSS-Easing-Funktion für die Umsortier-Animation, zum Beispiel `cubic-bezier(1, 0, 0, 1)`.
`setData`	`(dataTransfer: DataTransfer, draggedElement: HTMLElement) => void`	—	Wird beim Start des Ziehens aufgerufen, um in den nativen `DataTransfer` zu schreiben — der Haken, um aus der Seite heraus zu ziehen.
`store`	`{ get: (sortable: Sortable) => string[]; set: (sortable: Sortable) => void }`	—	Paar aus `get`/`set`-Callbacks, um die Reihenfolge zu speichern und beim nächsten Laden wiederherzustellen, mit `dataIdAttr` als Schlüssel.

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.