For React 拖拽交互库, the strongest matches are clauderic/react-sortable-hoc (This React higher-order component library provides sortable and reorderable), clauderic/dnd-kit (A fully-featured, modular drag-and-drop toolkit for React with TypeScript) and atlassian/react-beautiful-dnd (atlassian/react-beautiful-dnd is a declarative React drag-and-drop library that excels). gaearon/react-dnd and react-dnd/react-dnd round out the shortlist. Each is ranked by relevance to your query, popularity and recent activity.
这些开源库提供了用于在 React 应用中实现直观拖放交互的组件与 Hooks。
React Sortable Hoc is a library for building drag-and-drop reorderable lists and grids within web applications. It provides a set of reusable components designed to integrate into the component-based architecture of React, allowing users to rearrange elements through mouse or touch input. The library utilizes a higher-order component pattern to inject drag-and-drop state management into existing list components without requiring modifications to the underlying implementation. It employs portal-based ghost rendering to move elements outside the normal document flow, while using hardware-accele
This React higher-order component library provides sortable and reorderable lists with touch support and customizable ghost previews, fitting your drag-and-drop needs, though it lacks TypeScript definitions and may have limited cross-container dragging and explicit ARIA features.
This project is a modular toolkit for building accessible, component-based drag-and-drop interfaces in React. It provides a foundational framework for managing complex spatial interactions, state synchronization, and element registration, allowing developers to create interactive web applications that support mouse, touch, and keyboard inputs. The library distinguishes itself through a highly extensible architecture that separates input handling from interaction logic. It utilizes a sensor-based input abstraction to normalize diverse user interactions and a plugin-driven lifecycle to inject c
A fully-featured, modular drag-and-drop toolkit for React with TypeScript, supporting sortable lists, cross-container dragging, touch and keyboard input, and customizable previews — exactly what this search is after.
This project is a declarative drag-and-drop library designed for building accessible and fluid interface interactions within web applications. It provides a component-based interface for managing complex list reordering and spatial relationships between elements, utilizing a specialized state container to coordinate movement logic. The library distinguishes itself through a focus on accessibility, maintaining a live connection between visual drag states and the browser accessibility tree to support screen readers and keyboard navigation. It optimizes performance by bypassing standard componen
atlassian/react-beautiful-dnd is a declarative React drag-and-drop library that excels at sortable lists, cross-container dragging, touch interactions, and accessibility (ARIA), with customizable drag previews and TypeScript definitions, making it a comprehensive solution for your needs.
React-dnd is a drag and drop framework and library for React applications. It provides a system of higher-order components and hooks to implement draggable interface elements and drop targets using a declarative API. The framework separates the logic of moving items from the visual presentation of the user interface. This allows for the development of interactive interfaces, such as visual list reordering and custom dashboard layouts where widgets or panels can be reorganized.
React DnD is a well-established, declarative drag-and-drop framework for React that supports sortable lists, cross-container dragging, adjustable previews, and TypeScript out of the box—making it a comprehensive choice for building interactive interfaces.
React DnD is a library for building complex drag-and-drop interfaces within React applications. It provides a declarative, component-based architecture that abstracts native browser drag-and-drop APIs, allowing developers to manage state and interactions between draggable sources and drop targets. The library utilizes a dependency injection backend to decouple interaction logic from specific input methods, supporting mouse, touch, and native browser events through a unified normalization layer. It employs a registry pattern to track active drop zones and a monitor pattern to observe the lifec
react-dnd is a declarative library for building drag-and-drop interfaces in React, supporting touch, TypeScript, and customizable previews, though its built-in ARIA accessibility support is limited.
react-draggable is a drag and drop library and coordinate-based position manager for React. It functions as a component wrapper that adds draggable behavior to user interface elements, enabling them to be moved via mouse or touch interactions. The library provides touch-enabled interaction tools that unify pointer events across desktop browsers and touch screen devices. It utilizes CSS transforms to handle element movement and coordinate tracking. The system covers movement constraints such as axis restriction and boundary clamping to confine elements within specific areas. It includes posit
react-draggable is a React drag-and-drop library that handles moving elements with mouse or touch, covering the core drag functionality, but it lacks the sortable lists, cross-container dragging, ARIA support, and customizable preview features you asked for.
React Grid Layout is a draggable and resizable grid system for React that organizes components into a coordinate-based layout. It functions as a responsive layout manager and a serialized grid state engine, providing the tools necessary to create user-customizable workspaces where interface elements can be moved and resized. The system distinguishes itself through breakpoint-driven layout mapping, which adjusts grid configurations based on container width. It utilizes a serialized state model to convert spatial positions and dimensions into data formats for saving and restoring user layouts,
React Grid Layout is a React library that adds drag-and-drop and resize capabilities within a grid system, fitting the core intent of a drag-and-drop library, though its focus on grid layouts makes it a narrower fit than a general-purpose solution for sortable lists or inter-container dragging.
React Grid Layout is a toolkit for building draggable, resizable, and responsive dashboard interfaces. It functions as a coordinate-based grid system that reconciles component positions and dimensions through declarative metadata, allowing developers to manage complex collections of UI elements that users can interact with directly. The library distinguishes itself through an automated packing algorithm that maintains structural integrity by shifting elements to fill gaps and resolving overlaps. It supports responsive design by monitoring container width changes against pre-defined breakpoint
react-grid-layout is a React library for building draggable and resizable grid dashboards, providing drag-and-drop functionality for grid-based layouts — it fits the category but focuses on coordinate-based grids rather than general sortable lists or cross-container dragging, and may not include built-in ARIA accessibility.
react-draggable is a UI interaction library that provides core primitives and components for adding tactile movement and coordinate-based positioning to web elements. It serves as a tool for making user interface elements movable via mouse or touch interactions within React applications. The library supports the implementation of custom drag handles, allowing the initiation of movement to be restricted to specific child elements identified by CSS selectors. It also provides programmatic drag state management, enabling developers to control element positioning or use callbacks for movement wit
mzabriskie/react-draggable is a lightweight React library for making elements draggable with touch and mouse support, squarely fitting the drag-and-drop category though it lacks built-in sortable lists, multi-container dragging, and ARIA features.
react-rnd is a JavaScript UI interaction library and React component used to create elements that are both draggable and resizable within a browser window. It functions as a constraint-based layout component that wraps DOM elements to enforce boundaries, grid snapping, and aspect ratio locks during manual adjustments. The library allows for the definition of custom interaction handles to act as the primary triggers for dragging and resizing actions. It supports axis restrictions, boundary limits, and the ability to round position and dimension values to specified pixel increments. The system
react-rnd is a React component for making elements draggable and resizable, which fits the drag-and-drop library category, but it lacks support for sortable lists, drag between containers, touch, and ARIA, so it is a narrow fit for the full drag-and-drop functionality requested.
| 仓库 | Star 数 | 语言 | 许可证 | 最后推送 |
|---|---|---|---|---|
| clauderic/react-sortable-hoc | 10.9K | JavaScript | mit | |
| clauderic/dnd-kit | 17.2K | TypeScript | MIT | |
| atlassian/react-beautiful-dnd | 34K | JavaScript | other | |
| gaearon/react-dnd | 21.6K | TypeScript | MIT | |
| react-dnd/react-dnd | 21.6K | TypeScript | MIT | |
| react-grid-layout/react-draggable | 9.3K | JavaScript | MIT | |
| strml/react-grid-layout | 22.3K | TypeScript | MIT | |
| react-grid-layout/react-grid-layout | 22.3K | TypeScript | MIT | |
| mzabriskie/react-draggable | 9.3K | JavaScript | MIT | |
| bokuweb/react-rnd | 4.3K | TypeScript | mit |