# react-grid-layout/react-draggable

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/react-grid-layout-react-draggable).**

9,292 stars · 1,051 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/react-grid-layout/react-draggable
- awesome-repositories: https://awesome-repositories.com/repository/react-grid-layout-react-draggable.md

## Description

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 positioning utilities for grid snapping, controlled state synchronization, and initial coordinate configuration, alongside event callbacks for tracking drag operations.

## Tags

### Part of an Awesome List

- [Drag and Drop](https://awesome-repositories.com/f/awesome-lists/devtools/drag-and-drop.md) — Provides a comprehensive set of tools for implementing drag-and-drop interactions in React applications.
- [Draggable and Resizable React Components](https://awesome-repositories.com/f/awesome-lists/devtools/component-and-react-utilities/draggable-and-resizable-react-components.md) — Functions as a wrapper that injects draggable behavior into any React component.

### User Interface & Experience

- [Positioning Transforms](https://awesome-repositories.com/f/user-interface-experience/component-utilities/animation-engines/css-transform-animations/positioning-transforms.md) — Uses CSS translate transforms to move elements efficiently without triggering expensive browser reflows.
- [Transform-Based Displacement](https://awesome-repositories.com/f/user-interface-experience/component-utilities/animation-engines/css-transform-animations/transform-based-displacement.md) — Moves elements using translate transforms to avoid reflows while maintaining a decoupled state of the original position. ([source](https://github.com/react-grid-layout/react-draggable#readme))
- [Coordinate-Based Positioning](https://awesome-repositories.com/f/user-interface-experience/coordinate-based-positioning.md) — Manages the spatial positioning of elements using a coordinate system with snapping and boundaries.
- [Drag and Drop Libraries](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries.md) — Offers a specialized library for adding draggable functionality to React UI elements.
- [Draggable Axis Configurations](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/draggable-axis-configurations.md) — Allows restricting draggable elements to specific axes and defining snapping behavior. ([source](https://github.com/react-grid-layout/react-draggable/blob/master/CHANGELOG.md))
- [Element Positioning](https://awesome-repositories.com/f/user-interface-experience/element-positioning.md) — Provides utilities for setting and updating the coordinate location of visual components using controlled state. ([source](https://github.com/react-grid-layout/react-draggable/blob/master/CLAUDE.md))
- [Drag Boundary Constraints](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-and-drop-interactions/drag-boundary-constraints.md) — Implements settings to restrict the movement of draggable elements within specific containers or coordinate areas. ([source](https://github.com/react-grid-layout/react-draggable/blob/master/CLAUDE.md))
- [Draggable Layout Elements](https://awesome-repositories.com/f/user-interface-experience/interactive-widgets/draggable-layout-elements.md) — Creates UI components that can be repositioned by the user through drag-and-drop interactions. ([source](https://github.com/react-grid-layout/react-draggable/blob/master/package.json))
- [Pointer Event Abstractions](https://awesome-repositories.com/f/user-interface-experience/pointer-event-abstractions.md) — Unifies mouse and touch input streams into a single event handler for cross-device compatibility.
- [Pointer Offset Tracking](https://awesome-repositories.com/f/user-interface-experience/pointer-offset-tracking.md) — Implements the core coordinate tracking logic needed to translate mouse or touch movement into element displacement.
- [Draggable Touch Inputs](https://awesome-repositories.com/f/user-interface-experience/touch-layout-interactions/draggable-touch-inputs.md) — Provides unified pointer event handling to enable dragging via touch screen devices and multi-touch inputs. ([source](https://github.com/react-grid-layout/react-draggable/blob/master/CHANGELOG.md))
- [Boundary Constraints](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/interaction-restrictions/boundary-constraints.md) — Confines draggable elements to a specific area such as a parent container or viewport. ([source](https://github.com/react-grid-layout/react-draggable/blob/master/CHANGELOG.md))
- [Initial Coordinate Configuration](https://awesome-repositories.com/f/user-interface-experience/coordinate-based-position-calculators/percentage-based-position-calculators/initial-coordinate-configuration.md) — Defines the starting coordinates of a draggable element using fixed values or percentage offsets. ([source](https://github.com/react-grid-layout/react-draggable/blob/master/CHANGELOG.md))
- [Movement Constraints](https://awesome-repositories.com/f/user-interface-experience/element-positioning/movement-constraints.md) — Limits element movement to specific axes or confines it within parent boundaries.
- [Drag Event Callbacks](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-operation-controls/drag-event-callbacks.md) — Provides configuration hooks to execute custom logic at specific stages of a drag operation. ([source](https://github.com/react-grid-layout/react-draggable#readme))
- [Reference Point Customization](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/item-positioning/offset-calculators/reference-point-customization.md) — Allows defining an ancestor element as the reference point for calculating movement offsets. ([source](https://github.com/react-grid-layout/react-draggable/blob/master/CHANGELOG.md))
- [Interactive UI Components](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-components.md) — Enables the creation of interfaces where elements can be freely repositioned via user interaction.
- [Free-Form Movement](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-elements/free-form-movement.md) — Allows users to move interface elements freely in any direction via mouse or touch. ([source](https://github.com/react-grid-layout/react-draggable/blob/master/Makefile))
- [Movement Boundary Constraints](https://awesome-repositories.com/f/user-interface-experience/movement-boundary-constraints.md) — Provides the ability to confine draggable elements within a parent container or the window boundaries.
- [Grid Snapping](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/grid-item-resizers/grid-snapping.md) — Enables draggable elements to snap to a defined grid for precise alignment.
- [Touch Gesture Libraries](https://awesome-repositories.com/f/user-interface-experience/touch-gesture-libraries.md) — Provides a set of tools that abstract raw touch inputs into recognizable drag-and-drop gestures.
- [Touch-Optimized Interfaces](https://awesome-repositories.com/f/user-interface-experience/touch-optimized-interfaces.md) — Ensures a fluid dragging experience optimized for touch-enabled devices and tablets.

### Software Engineering & Architecture

- [Drag Lifecycle Events](https://awesome-repositories.com/f/software-engineering-architecture/event-driven-architectures/drag-lifecycle-events.md) — Triggers lifecycle events that allow developers to implement custom positioning logic based on drag state. ([source](https://github.com/react-grid-layout/react-draggable/blob/master/README.md))
- [Prop-Driven State Synchronization](https://awesome-repositories.com/f/software-engineering-architecture/state-synchronization-utilities/prop-driven-state-synchronization.md) — Allows the element's position to be managed by an external React state passed via props.