# mzabriskie/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/mzabriskie-react-draggable).**

9,289 stars · 1,053 forks · JavaScript · MIT

## Links

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

## Description

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 without automatic style management.

The project covers a broad range of interaction capabilities, including drag event tracking through lifecycle callbacks and the enforcement of boundary constraints to restrict movement within defined dimensions. It supports both desktop and mobile devices through touch-enabled element positioning.

## Tags

### User Interface & Experience

- [Drag and Drop Libraries](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries.md) — Provides low-level primitives for managing coordinates and movement of elements on a screen.
- [React Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components.md) — Offers reusable draggable components specifically designed for integration within the React ecosystem.
- [Spatial State Tracking](https://awesome-repositories.com/f/user-interface-experience/coordinate-based-position-calculators/spatial-state-tracking.md) — Tracks real-time mouse and touch coordinates to maintain the spatial state of moving elements.
- [Element Positioning](https://awesome-repositories.com/f/user-interface-experience/element-positioning.md) — Implements element positioning that works across both desktop and mobile touch interfaces.
- [Drag Handles](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-operation-controls/drag-handles.md) — Allows restricting the movement of an element to a specific designated child handle.
- [Interactive UI Components](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-components.md) — Provides components that can be freely moved across the screen via mouse or touch interactions.
- [Draggable Layout Elements](https://awesome-repositories.com/f/user-interface-experience/interactive-widgets/draggable-layout-elements.md) — Provides UI components that can be freely repositioned across the screen via pointer interactions. ([source](https://github.com/mzabriskie/react-draggable#readme))
- [CSS Transform Animations](https://awesome-repositories.com/f/user-interface-experience/component-utilities/animation-engines/css-transform-animations.md) — Uses inline CSS transform properties to ensure smooth, hardware-accelerated movement of elements.
- [Dynamic Layout Engines](https://awesome-repositories.com/f/user-interface-experience/dynamic-layout-engines.md) — Provides a framework for programmatically controlling element positions and reacting to movement via callbacks.
- [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 boundaries to restrict the movement of draggable elements within defined coordinate areas.
- [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) — Ships configuration hooks that execute custom functions during the start, progression, and completion of drags. ([source](https://github.com/mzabriskie/react-draggable#readme))
- [Drag State Monitors](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-operation-controls/drag-state-monitors.md) — Offers tools to monitor drag progress and control element coordinates programmatically. ([source](https://github.com/mzabriskie/react-draggable#readme))

### Part of an Awesome List

- [Drag and Drop](https://awesome-repositories.com/f/awesome-lists/devtools/drag-and-drop.md) — Draggable element component.