react-draggable

# React-Draggable A simple component for making elements draggable. [**[Demo](https://react-grid-layout.github.io/react-draggable/) | [Changelog](CHANGELOG.md)**]

```jsx ``` ## Table of Contents - [Installation](#installation) - [Compatibility](#compatibility) - [Quick Start](#quick-start) - [API](#api) - [Draggable](#draggable) - [DraggableCore](#draggablecore) - [Using nodeRef](#using-noderef) - [Controlled vs. Uncontrolled](#controlled-vs-uncontrolled) - [Content Security Policy](#content-security-policy) - [Contributing](#contributing) ## Installation ```bash npm install react-draggable # or yarn add react-draggable ``` ```js // ES Modules import Draggable from 'react-draggable'; import { DraggableCore } from 'react-draggable'; // CommonJS const Draggable = require('react-draggable'); const { DraggableCore } = require('react-draggable'); ``` TypeScript types are included. ## Compatibility | Version | React Version | |---------|---------------| | 4.x | 16.3+ | | 3.x | 15 - 16 | | 2.x | 0.14 - 15 | ## Quick Start ```jsx import React, { useRef } from 'react'; import Draggable from 'react-draggable'; function App() { const nodeRef = useRef(null); return ( ); } ``` View the [Demo](https://react-grid-layout.github.io/react-draggable/) and its [source](/example/example.js) for more examples. ## API ### `` A `` element wraps an existing element and extends it with new event handlers and styles. It does not create a wrapper element in the DOM. Draggable items are moved using CSS Transforms. This allows items to be dragged regardless of their current positioning (relative, absolute, or static). Elements can also be moved between drags without incident. If the item you are dragging already has a CSS Transform applied, it will be overwritten by ``. Use an intermediate wrapper (`...`) in this case. #### Props ```ts type DraggableEventHandler = (e: Event, data: DraggableData) => void | false; type DraggableData = { node: HTMLElement, x: number, y: number, deltaX: number, deltaY: number, lastX: number, lastY: number, }; ``` | Prop | Type | Default | Description | |------|------|---------|-------------| | `allowAnyClick` | `boolean` | `false` | Allow dragging on non-left-button clicks | | `allowMobileScroll` | `boolean` | `false` | Don't prevent `touchstart`, allowing scrolling inside containers | | `axis` | `'both' \| 'x' \| 'y' \| 'none'` | `'both'` | Axis to allow dragging on | | `bounds` | `object \| string` | - | Restrict movement. Use `'parent'`, a CSS selector, or `{left, top, right, bottom}` | | `cancel` | `string` | - | CSS selector for elements that should not initiate drag | | `defaultClassName` | `string` | `'react-draggable'` | Class name applied to the element | | `defaultClassNameDragging` | `string` | `'react-draggable-dragging'` | Class name applied while dragging | | `defaultClassNameDragged` | `string` | `'react-draggable-dragged'` | Class name applied after drag | | `defaultPosition` | `{x: number, y: number}` | `{x: 0, y: 0}` | Starting position | | `disabled` | `boolean` | `false` | Disable dragging | | `enableUserSelectHack` | `boolean` | `true` | Add `user-select: none` while dragging | | `grid` | `[number, number]` | - | Snap to grid `[x, y]` | | `handle` | `string` | - | CSS selector for the drag handle | | `nodeRef` | `React.RefObject` | - | Ref to the DOM element. Required for React Strict Mode | | `nonce` | `string` | - | CSP nonce for the injected user-select `