hello-pangea/dnd
Dnd
Il s'agit d'une bibliothèque React de glisser-déposer conçue pour construire des listes déplaçables et des éléments réordonnables accessibles. Elle fournit un framework d'interaction multi-entrées qui gère les événements à travers la souris, le toucher et des capteurs personnalisés pour créer des interfaces utilisateur interactives.
La bibliothèque inclut un gestionnaire de liste virtualisée pour maintenir des fréquences d'images élevées lors de la manipulation de grands jeux de données en ne traitant que les éléments actuellement visibles à l'écran. Elle prend également en charge l'intégration de capteurs d'entrée personnalisés, permettant l'enregistrement de types d'entrée spécialisés pour déclencher et contrôler les opérations de glisser.
Le système couvre un large éventail de capacités d'interaction, incluant le défilement automatique des conteneurs, la détection de collision basée sur les coordonnées et le changement de parent d'élément via des portails. L'accessibilité est intégrée via le support du clavier et des annonces de lecteur d'écran qui communiquent les mouvements et les changements de position des éléments.
Features
- Reorderable Lists - Provides a framework for building interactive vertical or horizontal lists in React where items can be reordered.
- List Reordering Interfaces - Implements accessible vertical and horizontal lists where items can be manually reordered via mouse, touch, or keyboard.
- Accessible UI Components - Provides drag-and-drop interfaces with built-in keyboard support and ARIA-compliant screen reader announcements.
- Collision Detection - Calculates intersections of dragged element bounds with target drop zones to determine reordering positions.
- Drag and Drop Libraries - Provides a comprehensive library for implementing accessible drag-and-drop interactions in React applications.
- Interaction Constraint Logic - Includes logic to restrict which elements are draggable and define conditional boundaries for interactions.
- Unified Input Abstraction Layers - Abstracts mouse, touch, and keyboard events into a unified internal trigger system for consistent drag operations.
- Touch and Drag Interactions - Manages drag and drop interactions across mouse, touch, and custom sensor inputs through a unified framework.
- Interaction Customizers - Supports tailoring drag behavior through the integration of specialized sensors and custom drag handles.
- Custom Input Sensors - The library enables registering custom input types or scripted experiences to trigger and control drag operations.
- Virtualisation Engines - Ships a virtualization engine that optimizes performance by recycling DOM elements for visible content during drag operations.
- Virtualized List Rendering - Efficiently renders only the visible portion of large lists to maintain high frame rates.
- UI Change Announcements - Provides real-time announcements of UI updates and state changes to screen readers for dynamic drag-and-drop content.
- High-Performance Rendering - Optimizes the rendering of large datasets in React to maintain high frame rates during drag interactions.
- Screen Reader Live Regions - Implements screen reader live regions to dynamically communicate item movement and position changes.
- Virtualized List Rendering - Minimizes DOM nodes by rendering only the items currently visible in the viewport during active drag interactions.
- Portal-Based Injection - Moves dragged items to a separate DOM layer using portals to avoid layout clipping and z-index conflicts.
