explaingit

react-grid-layout/react-draggable

★ 9,289JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

A small React library that makes any element draggable with a single component wrapper, supporting axis locking, boundary constraints, grid snapping, drag handles, and touch events.

Mindmap

mindmap
  root((repo))
    What it does
      Drag any element
      Touch and mouse
      CSS transform moves
    Components
      Draggable auto state
      DraggableCore low level
    Configuration
      Axis constraints
      Boundary limits
      Grid snap support
      Drag handle area
    Use cases
      Dashboard cards
      Resizable panels
      Interactive canvases
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add drag-and-drop repositioning to cards or widgets in a React dashboard.

USE CASE 2

Build a panel layout where users can drag panels to rearrange them freely or within boundaries.

USE CASE 3

Create a canvas tool where elements can be repositioned with mouse or touch events.

USE CASE 4

Implement a drag handle on a modal so users can only drag it by its title bar.

Tech stack

JavaScriptTypeScriptReact

Getting it running

Difficulty · easy Time to first run · 5min

React 16.3 or later required. In React Strict Mode, must pass nodeRef prop explicitly to avoid deprecation warnings.

MIT license, use freely for any purpose including commercial projects, with no restrictions beyond keeping the copyright notice.

In plain English

React-Draggable is a small JavaScript library for React applications that makes any element on a page draggable. You wrap the element in a Draggable component and the user can then click and drag it anywhere on the screen. The library handles all the mouse and touch events and moves the element using CSS transforms, so it works regardless of how the element is positioned in the page layout. The library offers two components. The main one, called Draggable, manages its own internal state and applies the position automatically. The lower-level one, called DraggableCore, fires callbacks when drag events happen but leaves it to you to decide how to position the element. That second option is useful when building more complex tools that need precise control, like grid layouts or resizable panels. There are several configuration options. You can restrict dragging to only a horizontal or vertical axis. You can set boundaries so the element cannot be dragged outside a parent container or a defined box. You can define a drag handle so only a specific part of the element starts the drag rather than the whole thing. Snapping to a grid is also supported, which means the element moves in fixed increments rather than freely. Events fire at the start, during, and end of a drag so your application code can respond to each stage. Installation is through npm or yarn. TypeScript types are included so editors that support type checking work without any extra setup. The library is compatible with React 16.3 and later. The README notes one specific requirement for React Strict Mode: you must pass a ref (a reference to the DOM element) explicitly using the nodeRef prop, rather than letting the library find the element automatically, to avoid a deprecation warning from React. The project is licensed under MIT and is maintained as an open-source package.

Copy-paste prompts

Prompt 1
Show me how to use react-draggable to make a modal window draggable only by its title bar handle.
Prompt 2
How do I constrain a draggable React element so it cannot be moved outside its parent container using react-draggable bounds?
Prompt 3
Write a React component using react-draggable with grid snapping every 20px that logs the final position when dragging ends.
Prompt 4
How do I use the nodeRef prop with react-draggable in React Strict Mode to avoid the deprecated findDOMNode warning?
Prompt 5
What is the difference between Draggable and DraggableCore in react-draggable, and when should I use each?
Open on GitHub → Explain another repo

← react-grid-layout on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.