hello-pangea/dnd
Dnd
这是一个 React 拖拽库，专为构建可访问的拖拽列表和可重排序元素而设计。它提供了一个跨输入交互框架，管理跨鼠标、触摸和自定义传感器输入的事件，以创建交互式用户界面。
该库包含一个虚拟化列表管理器，通过仅处理屏幕上当前可见的元素，在处理大数据集时保持高帧率。它还支持自定义输入传感器集成，允许注册专门的输入类型来触发和控制拖拽操作。
该系统涵盖广泛的交互功能，包括自动容器滚动、基于坐标的碰撞检测以及使用门户（portals）的元素重父级化。可访问性通过键盘支持和屏幕阅读器公告集成，以传达项目移动和位置变化。
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.
