Eine klare Reihenfolge.

Prioritäten neu ordnen

Tab erreicht die Auf-/Ab-Buttons, Enter oder Leertaste verschiebt den Eintrag. Am Rand wechselt der Fokus zum weiterhin nutzbaren Button derselben Zeile.

1. Anforderungen klären

   Ziele und Grenzen für das Projekt festhalten.

2. Prototyp erstellen

   Die wichtigsten Abläufe ausprobieren.

3. Feedback einholen

   Gemeinsam die nächste Iteration vorbereiten.

Aktuelle IDs:

<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/sortable.css">
<ol id="my-priorities" data-r-sortable aria-label="Prioritäten">
  <li data-r-sort-id="plan">Planen</li>
  <li data-r-sort-id="build">Umsetzen</li>
  <li data-r-sort-id="review">Prüfen</li>
</ol>

import {createSortable} from 'https://ui.rittek.de/assets/modules/sortable.js';
const list = document.getElementById('my-priorities');
const sortable = createSortable(list);
list.addEventListener('rittek:sortchange', event => {
  console.log(event.detail.order, event.detail.source);
});

Feste Positionen

Eine gesperrte Zeile bleibt an ihrer Position. Andere Einträge können diese Barriere nicht überqueren; innerhalb eines freien Bereichs bleiben sie sortierbar.

1. Vorbereitung
2. Freigabe · feste Position
3. Umsetzung
4. Dokumentation

<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/sortable.css">
<ol id="my-workflow" aria-label="Projektablauf">
  <li data-r-sort-id="prepare">Vorbereiten</li>
  <li data-r-sort-id="approval" data-r-sort-disabled>Feste Freigabe</li>
  <li data-r-sort-id="build">Umsetzen</li>
  <li data-r-sort-id="document">Dokumentieren</li>
</ol>

import {createSortable} from 'https://ui.rittek.de/assets/modules/sortable.js';
createSortable(document.getElementById('my-workflow'));

API und Lebenszyklus

Jede direkte Kindzeile muss ein li mit einer innerhalb der Liste eindeutigen, nicht leeren data-r-sort-id sein. data-r-sort-label liefert optional einen kurzen Namen für die Button-Beschriftungen. Verwende während einer Instanz dieselben Zeilen und IDs; für neue Zeilen das Modul zuerst zerstören, HTML ändern und neu initialisieren.

import {createSortable, initSortables} from '/assets/modules/sortable.js';
const element = document.querySelector('[data-r-sortable]');
const sortable = createSortable(element);
sortable.getOrder(); // Kopie der aktuellen IDs
sortable.move('review', 0); // Zielposition nullbasiert
sortable.reset(); // Reihenfolge bei Initialisierung wiederherstellen
sortable.refresh(); // Buttonzustände nach Attributänderung aktualisieren
sortable.destroy(); // Erzeugte Controls entfernen; Reihenfolge erhalten
const group = initSortables(document);
group.destroy();

move liefert true bei einer Änderung, false bei gesperrtem Bereich oder unveränderter Position. Unbekannte IDs und ungültige Zielpositionen werfen RangeError. createSortable(element, {disabled: true}) oder data-r-sort-disabled auf der Liste sperrt Verschieben und Reset. Dasselbe Attribut auf einer Zeile sperrt ihre Position. Attributänderungen werden beobachtet; refresh wirkt sofort.

rittek:sortchange enthält detail.order als neue ID-Liste und detail.source als move oder reset. Die sichtbare DOM-Reihenfolge entspricht immer getOrder(). Änderungen sind lokal. Ein erneutes Initialisieren derselben Liste räumt die alte Instanz auf und verwendet die aktuelle Reihenfolge als neue Ausgangsreihenfolge. destroy entfernt erzeugte Buttons, Status und Listener; bereits vorhandene Attribute bleiben erhalten. Nach destroy sind move und reset nicht mehr verwendbar. Reset wird verweigert, wenn dadurch eine aktuell gesperrte Zeile ihre Position verlassen würde. Die Textzeilen bleiben ohne JavaScript als native Liste lesbar.

Dieses Modul nutzt Buttons und enthält kein Drag-and-drop. Farben, Dichte und Schriftgröße folgen den gemeinsamen Tokens; reduzierte Bewegung wird berücksichtigt. Das Modul und seine CSS-Datei werden ausdrücklich eingebunden.