Verbesserung
Top-Thema
Detail
Wichtig
Detail
Top-Thema
#23472
In-app konfiguriertes Drag&Drop mit Pre-Target-Validierung
Als Anwender möchte ich bereits beim Überfahren eines Objektes während eines Drag&Drop-Vorgangs Feedback über die Validität des Objektes im Zusammenhang mit den Objekten des Drag&Drop Vorganges erhalten.
Wenn ein Target nicht valide ist, so soll am Mauszeiger eine "Verbotszeichen" angezeigt werden und das Loslassen auf einem nicht validen Ziel soll den Drag&Drop Vorgang abbrechen. Hierbei soll keine Änderung an Objekten stattfinden, noch soll keine Fehlermeldung aufgezeigt werden.
Umsetzung
Um die Gültigkeit einer Drag and Drop Operation zu prüfen wird der Kontext benötigt. Diese Überprüfung findet auf Seite des Servers statt, der je nach Gültigkeit eine "rote Linie" als Markierung für einen möglichen Drop oder einen "Verbotszeichen"-Marker rendert. Um den Server nicht unnötigerweise stark zu belasten, gibt es einerseits einen Cache auf Seite des Clients, der bisherige Ergebnisse, ob das gezogene Element auf das Zielelement fallengelassen werden kann, zwischenspeichert. Desweiteren muss mindestens 50ms (erstmal willkürlich gewählt) zwischen jeder Anfrage gewartet werden.
Benutzung
Ein konfigurierter Drag&Drop besteht aus 2 Teilen:
- In einer Drag fähigen Komponente (Tree, Table, TreeTable, etc.) muss konfiguriert werden welche Elemente vom Benutzer gedraggt werden können. Bearbeitet man die Sicht der Komponente, so erhält man einen Dialog, wo der Drag konfiguriert werden kann:
In diesem Beispiel können nur Elemente gezogen werden, die ein Modell vom Typ NamedPlanElement besitzen.
- In einer Drop fähigen Komponente muss konfiguriert werden, ob das Element an einer gegebenen Stelle gedroppt werden kann und welche Aktion anschließend ausgeführt wird. Das kann, analog zur Konfiguration eines Drags, durch Bearbeitung der Sicht der Komponente konfiguriert werden:
Das Ergebnis des Prädikats, ob der Drop gültig ist, gibt dem Benutzer eine visuelle Rückmeldung. Kann ein Element an der Stelle gedroppt werden, dann wird dies dem Benutzer durch eine rote Linie gekennzeichnet:
- Tabelle: In der tl:TableConfig ex. die Optionen dragSource und tableDrop
- Baum: In der tl:TreeComponent.Config ex. die Optionen dragSource und treeDrop
Test
In der Sicht Technisches Demo > Komponenten > Drag & Drop kann die DnD-Funktionalität getestet werden. In der Template-Bilbiothek können neue Elemente angelegt werden und per DnD in den Fabrikplan gezogen werden.