--- title: "Sortierbare Listen" description: "Listen, Tab-Leisten und Raster, die sich beim Ziehen neu ordnen – makeSortableList rendert einen Entwurf, makeSortableItem macht die Zeilen, und der Drop schreibt die neue Reihenfolge in dein Ref. Handles, eine Drop-Linie, Tauschen." canonical_url: "https://zizigy.github.io/vue-dnd-kit/de/docs/guides/sortable-lists" --- > Index of every page on this site: [llms.txt](https://zizigy.github.io/vue-dnd-kit/llms.txt) ## Eine Liste und ihre Zeilen Eine sortierbare Liste braucht zwei Komponenten: die Liste und ihre Zeile. ```vue [LayersPanel.vue] ``` ```vue [LayerRow.vue] ``` Die Zeile registriert sich bei der Liste, in der sie gerendert wird. Eine Komponente kann mehrere Listen anlegen (zwei Spalten, eine Liste in einer Liste): Jede Zeile gehört zu der, deren Element sie enthält, bei Listen in Listen zur innersten. ## Der Entwurf `makeSortableList` gibt `items` zurück, einen **Entwurf** deines Arrays. Während du ziehst, ordnet sich der Entwurf live neu: Die gezogene Zeile nimmt ihren neuen Slot ein, und die anderen gleiten aus dem Weg. Dein Array ändert sich bis zum Drop nicht. Dann schreibt die Bibliothek die neue Reihenfolge hinein. Das Ebenen-Panel oben zeigt beides: Das Panel rendert `items` und bewegt sich, während du ziehst; die Zeichenfläche liest `layers`, das Array selbst, und stapelt sich erst um, wenn du loslässt. - Rendere `items`, nicht dein Array. Renderst du dein Array, bewegt sich bis zum Drop nichts. - Das Schreiben passiert nach dem `onDrop` der Liste. In `onDrop` enthält dein Array noch die alte Reihenfolge und `e.result` die neue. - `layers` ist ein normales Ref (hier ein `defineModel`, und das Schreiben emittiert `update:modelValue`), der Rest deiner App sieht die Änderung also wie jede andere. ```ts makeSortableList(list, { items: layers, onDrop: (e) => { console.log(e.from.index, '→', e.to.index, e.result.get(e.to.list)); }, }); ``` Ein Store, Serverzustand oder unveränderliche Daten? Übergib einen Getter oder ein `computed` statt eines Refs. In eine schreibgeschützte Quelle schreibt die Bibliothek nicht: Ruf `e.preventDefault()` auf und wende `e.result` selbst an. Siehe [kontrollierte Listen](https://zizigy.github.io/docs/guides/shared-lists#controlled-lists). ## Schlüssel Zeilen werden über ihre Daten identifiziert, nie über den Index oder eine automatische ID. Standardmäßig ist der Schlüssel `item.id`, bei Strings und Zahlen das Element selbst. ```ts // LayersPanel.vue: your items have another key makeSortableList(list, { items: layers, getKey: (layer) => layer.uuid }); // LayerRow.vue: `item` is keyed with the list's getKey… makeSortableItem(el, { item: () => props.layer }); // …or pass the key yourself makeSortableItem(el, { id: () => props.layer.uuid }); ``` - Nimm denselben Schlüssel im `v-for`: `:key="layer.uuid"`. Mit `:key="index"` animieren die falschen Zeilen, und ihr Zustand springt zwischen den Zeilen. - Schlüssel müssen über alle Listen hinweg eindeutig sein, die Elemente austauschen. - Übergib `item` und `id` als Getter, damit eine Zeile synchron bleibt, wenn sich ihre Props ändern. ## Handles Standardmäßig startet die ganze Zeile einen Drag, außer den Buttons, Eingabefeldern und anderen Bedienelementen darin: Das Auge und das Schloss einer Ebene bleiben einfache Buttons. Übergib `handle`, um nur an einem Teil zu ziehen: ```vue [LayerRow.vue] ``` - `handle` ist ein Selektor innerhalb des Elements oder ein Element-Ref. - Ein Maus-Drag startet am Handle sofort, ohne die üblichen 4 px. Ein Druck ohne Bewegung bleibt ein Klick: Das Handle kann bei `click` ein Menü öffnen. - Das Handle bekommt die Attribute des Drags (`role`, `tabindex`, `aria-*`), und Drags per Tastatur starten an ihm. Mach das Handle zu einem `