dnd kit
@dnd-kit
useDraggable et useDroppable . et ne vous obligera pas à ré-architecturer votre application ou à créer des nœuds DOM wrapper supplémentaires.@dnd-kit/sortable , qui est une fine couche construite sur @dnd-kit/core . Plus de préréglages à venir. Pour savoir comment démarrer avec dnd kit , visitez le site de documentation officiel. Vous trouverez une documentation détaillée sur l'API, des conseils et des guides pour vous aider à créer des interfaces glisser-déposer.
La bibliothèque principale de dnd kit expose deux concepts principaux :
Améliorez vos composants existants à l'aide des hooks useDraggable et useDroppable , ou combinez les deux pour créer des composants qui peuvent à la fois être glissés et déposés.
Gérez les événements et personnalisez le comportement de vos éléments déplaçables et de vos zones déposables à l'aide du fournisseur <DndContext> . Configurez les capteurs pour gérer différentes méthodes de saisie.
Utilisez le composant <DragOverlay> pour afficher une superposition déplaçable qui est supprimée du flux de documents normal et positionnée par rapport à la fenêtre.
Consultez notre guide de démarrage rapide pour savoir comment démarrer.
L'extensibilité est au cœur du kit dnd . Il est conçu pour être léger et extensible. Il est livré avec les fonctionnalités que nous pensons que la plupart des gens voudront la plupart du temps, et fournit des points d'extension pour construire le reste au-dessus de @dnd-kit/core .
Un excellent exemple du niveau d'extensibilité de dnd kit est le préréglage Sortable, qui est construit à l'aide des points d'extension exposés par @dnd-kit/core .
Les principaux points d'extension du kit dnd sont :
Construire des interfaces glisser-déposer accessibles est difficile ; dnd kit a un certain nombre de valeurs par défaut et de points de départ judicieux pour vous aider à rendre votre interface glisser-déposer accessible :
aria qui doivent être transmis aux éléments déplaçablesConsultez notre guide d'accessibilité pour en savoir plus sur la manière dont vous pouvez contribuer à offrir une meilleure expérience aux lecteurs d'écran.
Contrairement à la plupart des bibliothèques glisser-déposer, le kit dnd n'est intentionnellement pas construit sur l'API glisser-déposer HTML5. Il s'agit d'une décision architecturale délibérée, qui implique des compromis dont vous devez être conscient avant de décider de l'utiliser, mais pour la plupart des applications, nous pensons que les avantages l'emportent sur les compromis.
L'API HTML5 Drag and Drop présente de sérieuses limitations . Il ne prend pas en charge les appareils tactiles ni l'utilisation du clavier pour faire glisser des éléments, ce qui signifie que les bibliothèques construites dessus doivent exposer une implémentation entièrement différente pour prendre en charge ces méthodes de saisie. Il ne prend pas non plus en charge les cas d'utilisation courants tels que le verrouillage du glissement sur un axe spécifique ou sur les limites d'un conteneur, les stratégies de détection de collision personnalisées ou même la personnalisation de l'aperçu de l'élément déplacé.
Bien qu'il existe des solutions à certains de ces problèmes, ces solutions augmentent généralement la complexité de la base de code et la taille globale du bundle de la bibliothèque, et entraînent des incohérences entre les couches de la souris, du toucher et du clavier, car elles sont alimentées par des implémentations entièrement différentes.
Le principal compromis de ne pas utiliser l'API HTML5 Drag and Drop est que vous ne pourrez pas faire de glisser depuis le bureau ou entre les fenêtres. Si le cas d'utilisation du glisser-déposer que vous avez en tête implique ce type de fonctionnalité, vous souhaiterez certainement utiliser une bibliothèque construite sur l'API HTML 5 Drag and drop. Nous vous recommandons fortement de consulter réagir-dnd pour une bibliothèque React dotée d'un backend HTML 5 natif de glisser-déposer.
Le kit dnd vous permet de créer des interfaces glisser-déposer sans avoir à muter le DOM à chaque fois qu'un élément doit changer de position.
Ceci est possible car dnd kit calcule et stocke paresseusement les positions initiales et la disposition de vos conteneurs déposables lorsqu'une opération de glisser est lancée. Ces positions sont transmises à vos composants qui utilisent useDraggable et useDroppable afin que vous puissiez calculer les nouvelles positions de vos éléments pendant qu'une opération de glissement est en cours, et les déplacer vers leurs nouvelles positions à l'aide de propriétés CSS performantes qui ne déclenchent pas de repeinture telle que translate3d et scale . Pour un exemple de la façon dont cela peut être réalisé, consultez l'implémentation des stratégies de tri exposées par la bibliothèque @dnd-kit/sortable .
Cela ne veut pas dire que vous ne pouvez pas déplacer la position des éléments dans le DOM lors du déplacement, c'est quelque chose qui est pris en charge et parfois inévitable. Dans certains cas, il ne sera pas possible de connaître à l'avance la nouvelle position et la nouvelle disposition de l'élément tant que vous ne l'aurez pas déplacé dans le DOM. Sachez simplement que ce genre de mutations dans le DOM lors du glisser sont beaucoup plus coûteuses et entraîneront une repeinture, donc si possible, préférez calculer les nouvelles positions en utilisant translate3d et scale .
Le kit dnd utilise également des écouteurs SyntheticEvent pour les événements activateurs de tous les capteurs, ce qui conduit à des performances améliorées par rapport à l'ajout manuel d'écouteurs d'événements à chaque nœud déplaçable individuel.
@dnd-kit@dnd-kit/core@dnd-kit/accessibility@dnd-kit/sortable@dnd-kit/modifiers@dnd-kit/utilities Vous devrez installer toutes les dépendances dans le répertoire racine. Étant donné que @dnd-kit est un monorepo qui utilise les espaces de travail Lerna et Yarn, la CLI npm n'est pas prise en charge (uniquement Yarn).
yarn installCela installera toutes les dépendances dans chaque projet, les construira et les liera symboliquement via Lerna.
Dans un terminal, exécutez yarn start en parallèle :
yarn start Cela construit chaque package sur <packages>/<package>/dist et exécute le projet en mode surveillance afin que toutes les modifications que vous enregistrez dans <packages>/<package>/src provoquent une reconstruction en <packages>/<package>/dist . Les résultats seront diffusés vers le terminal.
yarn start:storybookExécute le livre d'histoires. Ouvrez http://localhost:6006 pour l'afficher dans le navigateur.
Vous pouvez jouer avec des forfaits locaux dans le terrain de jeu alimenté par Parcel.
yarn start:playground Cela démarrera le terrain de jeu sur localhost:1234 . Si lerna exécute watch en mode parallèle dans un terminal, puis que vous exécutez parcel, votre terrain de jeu se rechargera à chaud lorsque vous apporterez des modifications à un module importé dont la source se trouve à l'intérieur de packages/*/src/* . Notez que pour ce faire, la commande start de chaque package transmet à TDSX l'indicateur --noClean . Cela empêche Parcel d'exploser entre les reconstructions en raison d'erreurs File Not Found.
Conseil de sécurité important : lors de l'ajout/de la modification de packages dans le terrain de jeu, utilisez un objet alias dans package.json. Cela indiquera à Parcel de les résoudre dans le système de fichiers au lieu d'essayer d'installer le package à partir de NPM. Il corrige également les erreurs React en double que vous pourriez rencontrer.
(Dans un troisième terminal), vous pouvez exécuter Cypress et il exécutera les tests d'intégration sur storybook.
