react-draggable

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.