dnd kit
@dnd-kit
useDraggable und useDroppable verfügbar. und zwingt Sie nicht dazu, die Architektur Ihrer App neu zu gestalten oder zusätzliche Wrapper-DOM-Knoten zu erstellen.@dnd-kit/sortable an, eine dünne Schicht, die auf @dnd-kit/core aufbaut. Weitere Voreinstellungen folgen in Zukunft. Um zu erfahren, wie Sie mit dem DND-Kit beginnen, besuchen Sie die offizielle Dokumentationswebsite. Sie finden eine ausführliche API-Dokumentation, Tipps und Anleitungen, die Sie beim Erstellen von Drag-and-Drop-Schnittstellen unterstützen.
Die Kernbibliothek des DND-Kits stellt zwei Hauptkonzepte offen:
Erweitern Sie Ihre vorhandenen Komponenten mithilfe der Hooks useDraggable und useDroppable oder kombinieren Sie beide, um Komponenten zu erstellen, die per Drag-and-Drop verschoben werden können.
Behandeln Sie Ereignisse und passen Sie das Verhalten Ihrer ziehbaren Elemente und ablegbaren Bereiche mithilfe des <DndContext> -Anbieters an. Konfigurieren Sie Sensoren für die Verarbeitung verschiedener Eingabemethoden.
Verwenden Sie die Komponente <DragOverlay> , um eine ziehbare Überlagerung zu rendern, die aus dem normalen Dokumentfluss entfernt und relativ zum Ansichtsfenster positioniert wird.
Schauen Sie sich unsere Kurzanleitung an, um zu erfahren, wie Sie loslegen können.
Erweiterbarkeit ist das Herzstück des DND-Kits . Es ist schlank und erweiterbar aufgebaut. Es wird mit den Funktionen ausgeliefert, von denen wir glauben, dass sie die meisten Leute die meiste Zeit wollen werden, und bietet Erweiterungspunkte, um den Rest auf @dnd-kit/core aufzubauen.
Ein Paradebeispiel für die Erweiterbarkeit des DND-Kits ist die Voreinstellung „Sortable“, die mithilfe der von @dnd-kit/core bereitgestellten Erweiterungspunkte erstellt wird.
Die primären Erweiterungspunkte des DND-Kits sind:
Es ist schwierig, barrierefreie Drag-and-Drop-Schnittstellen zu erstellen. Das DND-Kit verfügt über eine Reihe sinnvoller Standardeinstellungen und Ausgangspunkte, die Ihnen dabei helfen, Ihre Drag-and-Drop-Oberfläche zugänglich zu machen:
aria -Attribute , die an ziehbare Elemente übergeben werden solltenSehen Sie sich unseren Leitfaden zur Barrierefreiheit an, um mehr darüber zu erfahren, wie Sie dazu beitragen können, Screenreadern ein besseres Erlebnis zu bieten.
Im Gegensatz zu den meisten Drag-and-Drop-Bibliotheken basiert das DND-Kit absichtlich nicht auf der HTML5-Drag-and-Drop-API. Dies war eine bewusste architektonische Entscheidung, die zwar mit Kompromissen verbunden ist, die Sie kennen sollten, bevor Sie sich für die Verwendung entscheiden. Wir glauben jedoch, dass bei den meisten Anwendungen die Vorteile die Kompromisse überwiegen.
Die HTML5-Drag-and-Drop-API weist einige schwerwiegende Einschränkungen auf. Touch-Geräte oder die Verwendung der Tastatur zum Ziehen von Elementen werden nicht unterstützt. Das bedeutet, dass die darauf aufbauenden Bibliotheken eine völlig andere Implementierung bereitstellen müssen, um diese Eingabemethoden zu unterstützen. Außerdem werden häufige Anwendungsfälle wie das Sperren des Ziehens auf eine bestimmte Achse oder die Grenzen eines Containers, benutzerdefinierte Kollisionserkennungsstrategien oder sogar das Anpassen der Vorschau des gezogenen Elements nicht unterstützt.
Für einige dieser Probleme gibt es zwar Problemumgehungen, diese erhöhen jedoch in der Regel die Komplexität der Codebasis und die Gesamtpaketgröße der Bibliothek und führen zu Inkonsistenzen zwischen den Maus-, Touch- und Tastaturebenen, da sie auf völlig unterschiedlichen Implementierungen basieren.
Der Hauptnachteil , wenn Sie die HTML5-Drag-and-Drop-API nicht verwenden, besteht darin, dass Sie nicht in der Lage sind, vom Desktop oder zwischen Fenstern zu ziehen. Wenn der Drag-and-Drop-Anwendungsfall, den Sie sich vorstellen, diese Art von Funktionalität beinhaltet, sollten Sie auf jeden Fall eine Bibliothek verwenden, die auf der HTML 5 Drag-and-Drop-API aufbaut. Wir empfehlen Ihnen dringend, sich „react-dnd“ anzusehen, um eine React-Bibliothek zu finden, die über ein natives HTML 5 Drag-and-Drop-Backend verfügt.
Mit dem DND-Kit können Sie Drag-and-Drop-Schnittstellen erstellen, ohne das DOM jedes Mal ändern zu müssen, wenn die Position eines Elements geändert werden muss.
Dies ist möglich, weil das DND-Kit die Anfangspositionen und das Layout Ihrer abwerfbaren Container langsam berechnet und speichert, wenn ein Ziehvorgang initiiert wird. Diese Positionen werden an Ihre Komponenten weitergegeben, die useDraggable und useDroppable verwenden, sodass Sie die neuen Positionen Ihrer Elemente während eines Ziehvorgangs berechnen und sie mithilfe performanter CSS-Eigenschaften, die kein Repaint auslösen, an ihre neuen Positionen verschieben können, z translate3d und scale . Ein Beispiel dafür, wie dies erreicht werden kann, finden Sie in der Implementierung der Sortierstrategien, die von der @dnd-kit/sortable -Bibliothek bereitgestellt werden.
Das soll nicht heißen, dass Sie die Position der Elemente im DOM beim Ziehen nicht verschieben können. Dies wird unterstützt und ist manchmal unvermeidlich. In einigen Fällen ist es nicht möglich, die neue Position und das neue Layout des Elements im Voraus zu kennen, bis Sie es im DOM verschieben. Beachten Sie jedoch, dass diese Art von Mutationen am DOM beim Ziehen viel teurer sind und ein Neuzeichnen verursachen. Berechnen Sie die neuen Positionen daher nach Möglichkeit lieber mithilfe von translate3d und scale .
Das DND-Kit verwendet außerdem SyntheticEvent-Listener für die Aktivatorereignisse aller Sensoren, was zu einer verbesserten Leistung gegenüber dem manuellen Hinzufügen von Ereignis-Listenern zu jedem einzelnen ziehbaren Knoten führt.
@dnd-kit -Repository@dnd-kit/core@dnd-kit/accessibility@dnd-kit/sortable@dnd-kit/modifiers@dnd-kit/utilities Sie müssen alle Abhängigkeiten im Stammverzeichnis installieren. Da es sich beim @dnd-kit um ein Monorepo handelt, das Lerna und Yarn Workspaces verwendet, wird npm CLI nicht unterstützt (nur Yarn).
yarn installDadurch werden alle Abhängigkeiten in jedem Projekt installiert, erstellt und über Lerna symbolisch verknüpft
Führen Sie in einem Terminal yarn start parallel aus:
yarn start Dadurch wird jedes Paket in <packages>/<package>/dist erstellt und das Projekt im Überwachungsmodus ausgeführt, sodass alle Änderungen, die Sie in <packages>/<package>/src speichern, eine Neuerstellung in <packages>/<package>/dist bewirken. Die Ergebnisse werden an das Terminal gestreamt.
yarn start:storybookFührt das Storybook aus. Öffnen Sie http://localhost:6006, um es im Browser anzuzeigen.
Auf dem Parcel-powered-Spielplatz können Sie mit lokalen Paketen spielen.
yarn start:playground Dadurch wird der Spielplatz auf localhost:1234 gestartet. Wenn lerna watch im parallelen Modus in einem Terminal ausführt und Sie dann packet ausführen, wird Ihr Playground im laufenden Betrieb neu geladen, wenn Sie Änderungen an einem importierten Modul vornehmen, dessen Quelle sich in packages/*/src/* befindet. Beachten Sie, dass dazu der start jedes Pakets TDSX das Flag --noClean übergibt. Dadurch wird verhindert, dass Parcel aufgrund von „Datei nicht gefunden“-Fehlern zwischen den Neuerstellungen explodiert.
Wichtiger Sicherheitstipp: Wenn Sie Pakete im Playground hinzufügen/ändern, verwenden Sie alias Objekt in package.json. Dadurch wird Parcel angewiesen, sie in das Dateisystem aufzulösen, anstatt zu versuchen, das Paket von NPM zu installieren. Es behebt auch doppelte React-Fehler, auf die Sie möglicherweise stoßen.
(In einem dritten Terminal) können Sie Cypress ausführen und es führt die Integrationstests für Storybook aus.
