TreeView: Drag & Drop

Zurück: Demo-Übersicht

Status: [Live]. Quelle: lib/plugins/wkfluentui/helper/widgets.php (Verschiebe-Links) und lib/plugins/wkfluentui/scripts/treeview.js (Drag-Layer). Referenz: DevExpress-Baum-Drag&Drop (Knoten zwischen Gruppen verschieben).

TreeView-Basiskontrakt bereits verstanden; jeder verschiebbare Knoten braucht einen key; der Aufrufer stellt einen POST-Endpunkt für Verschiebungen bereit.

Sichtbare Buttons zuerst, Drag als Schicht darüber: die Hoch-/Runter- Verschiebe-Links (reorderUrl) sind der primäre, tastaturbedienbare und No-JS-fähige Weg. HTML5-Drag&Drop kommt ausschließlich obendrauf (reorderAction) und ersetzt die Buttons nie — Drag ist für Tastaturnutzer nicht bedienbar (Grundsatz aus layout → Layout-Mechanik).

echo $widgets->tree($nodes, [
    'reorderUrl'    => static fn (string $key, string $op) => wl($ID, ['move' => $key, 'dir' => $op]),
    'reorderAction' => wl($ID, ['do' => 'move']),
]);

• $opts['reorderUrl'] — callable(string $key, string $op): string mit op ∈ up/down: rendert je Knoten mit key zwei sichtbare Verschiebe-Links (.wk-tree__move, mit aria-label). Der Server führt die Verschiebung beim Aufruf der URL aus.
• $opts['reorderAction'] (URL) — aktiviert die Drag-Schicht: das Wurzel-<ul> trägt data-wk-reorder-action; scripts/treeview.js macht key-Knoten draggable und postet beim Drop ein dynamisches Formular mit wk-tree-move (bewegter Knoten), wk-tree-ref (Zielknoten), wk-tree-pos (before/after) und dem sectok aus JSINFO — anonyme Sitzungen haben keinen Token, dort bleibt es bei den Links.

Sicherheit (verbindlich): der Server validiert jede Verschiebung erneut — sectok prüfen (checkSecurityToken()), Zyklen ausschließen, Ziel gegen die ACL des Nutzers prüfen (keine Verschiebung in eine ACL-fremde Gruppe) — dieselbe Regel wie bei jeder Massenaktion (s. Massenaktionen → Server-Seite).

Siehe Abschnitt 4; der POST-Handler des Aufrufers liest wk-tree-move/ wk-tree-ref/wk-tree-pos, prüft sectok und ACL und führt die Verschiebung aus.

• Drop auf den eigenen Teilbaum wird clientseitig ignoriert — die Zyklen-Prüfung bleibt trotzdem Server-Pflicht (ein manipulierter POST umgeht den Client).
• Verschieben zwischen Bäumen (zwei tree()-Instanzen) ist nicht Teil des Vertrags.

Die sichtbaren ▲/▼-Links (mit aria-label „Nach oben/unten verschieben„) bleiben immer der primäre, tastaturbedienbare Weg — Drag&Drop ist reine Maus-Komfortschicht.

Symptom: Drag startet, aber der Drop bewirkt nichts.

Ursache: kein sectok (anonyme Sitzung) oder reorderAction fehlt — die Drag-Schicht deaktiviert sich dann bewusst.

Lösung: angemeldet prüfen; reorderAction setzen; die ▲/▼-Links funktionieren unabhängig davon immer.

• Demo-Übersicht — alle Kategorien
• TreeView: Grundlagen — tree()-Basiskontrakt
• DataGrid: Data Editing (Massenaktionen) — Server-Validierungsregel für verschiebende Aktionen