{"library":"react-draggable","title":"React Draggable Component","description":"react-draggable is a React component library that makes HTML elements draggable within a web application. The current stable version is 4.5.0, with minor bugfix releases occurring periodically within a major version, and major versions released less frequently, indicating a stable and mature project. A key differentiator is that it doesn't create an additional wrapper element in the DOM, directly extending the wrapped element with event handlers and styles. It uses CSS Transforms for movement, allowing elements to be dragged regardless of their initial positioning and enabling movement between drags without issue. The library offers both a higher-order `Draggable` component for simple use cases and a lower-level `DraggableCore` for more fine-grained control over drag interactions, supporting both controlled and uncontrolled component patterns. It also ships with TypeScript types.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-draggable"],"cli":null},"imports":["import Draggable from 'react-draggable';","import { DraggableCore } from 'react-draggable';","import type { DraggableEvent, DraggableData } from 'react-draggable';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Draggable, { DraggableCore } from 'react-draggable';\n\ninterface AppState {\n  activeDrags: number;\n  deltaPosition: { x: number; y: number; };\n  controlledPosition: { x: number; y: number; };\n}\n\nclass App extends React.Component<{}, AppState> {\n\n  state = {\n    activeDrags: 0,\n    deltaPosition: { x: 0, y: 0 },\n    controlledPosition: { x: -400, y: 200 }\n  };\n\n  handleDrag = (e: any, ui: any) => {\n    const { x, y } = this.state.deltaPosition;\n    this.setState({\n      deltaPosition: { x: x + ui.deltaX, y: y + ui.deltaY }\n    });\n  };\n\n  onStart = () => {\n    this.setState({ activeDrags: ++this.state.activeDrags });\n  };\n\n  onStop = () => {\n    this.setState({ activeDrags: --this.state.activeDrags });\n  };\n\n  // For controlled component\n  adjustXPos = (e: any) => {\n    e.preventDefault();\n    e.stopPropagation();\n    const { x, y } = this.state.controlledPosition;\n    this.setState({ controlledPosition: { x: x - 10, y } });\n  };\n\n  adjustYPos = (e: any) => {\n    e.preventDefault();\n    e.stopPropagation();\n    const { x, y } = this.state.controlledPosition;\n    this.setState({ controlledPosition: { x, y: y - 10 } });\n  };\n\n  onControlledDrag = (e: any, ui: any) => {\n    const { x, y } = this.state.controlledPosition;\n    this.setState({\n      controlledPosition: { x: x + ui.deltaX, y: y + ui.deltaY }\n    });\n  };\n\n  onControlledDragStop = (e: any, ui: any) => {\n    this.onStop();\n    this.onControlledDrag(e, ui);\n  };\n\n  render() {\n    const dragHandlers = { onStart: this.onStart, onStop: this.onStop };\n    const { deltaPosition, controlledPosition } = this.state;\n    return (\n      <div>\n        <h1>React Draggable Demo</h1>\n        <Draggable {...dragHandlers}>\n          <div className=\"box\">\n            <div>I can be dragged!</div>\n          </div>\n        </Draggable>\n        <Draggable axis=\"x\" {...dragHandlers}>\n          <div className=\"box\">\n            <div>Only horizontal dragging</div>\n          </div>\n        </Draggable>\n        <Draggable axis=\"y\" {...dragHandlers}>\n          <div className=\"box\">\n            <div>Only vertical dragging</div>\n          </div>\n        </Draggable>\n        <Draggable handle=\".handle\" {...dragHandlers}>\n          <div className=\"box\">\n            <div className=\"handle\">Drag from here</div>\n            <div>Clicking here won't move me</div>\n          </div>\n        </Draggable>\n        <Draggable cancel=\".no-drag\" {...dragHandlers}>\n          <div className=\"box\">\n            <div className=\"no-drag\">Clicking here won't move me</div>\n            <div>Drag from here</div>\n          </div>\n        </Draggable>\n        <Draggable grid={[25, 25]} {...dragHandlers}>\n          <div className=\"box\">\n            <div>I snap to a 25 x 25 grid</div>\n          </div>\n        </Draggable>\n        <Draggable scale={0.5} {...dragHandlers}>\n          <div className=\"box\">\n            <div>I am 50% scale</div>\n          </div>\n        </Draggable>\n        <Draggable\n          defaultPosition={{x: 0, y: 0}}\n          position={controlledPosition}\n          onDrag={this.onControlledDrag}\n          onStop={this.onControlledDragStop}\n        >\n          <div className=\"box\">\n            I am a controlled component.\n            <br />\n            My position is ({controlledPosition.x}, {controlledPosition.y})\n            <br />\n            <button onClick={this.adjustXPos}>Adjust x (-10)</button>\n            <button onClick={this.adjustYPos}>Adjust y (-10)</button>\n          </div>\n        </Draggable>\n\n        <h2>DraggableCore</h2>\n        <DraggableCore {...dragHandlers}>\n          <div className=\"box no-cursor\">\n            I'm a DraggableCore.<br />\n            I only fire events.<br />\n            My position is ({deltaPosition.x}, {deltaPosition.y})\n          </div>\n        </DraggableCore>\n      </div>\n    );\n  }\n}\n\n// Basic CSS for demonstration\nconst styleSheet = document.createElement('style');\nstyleSheet.innerHTML = `\n.box {\n  background: #eee;\n  border: 1px solid #999;\n  border-radius: 3px;\n  width: 180px;\n  height: 180px;\n  margin: 10px;\n  padding: 10px;\n  float: left;\n  cursor: grab;\n  font-family: monospace;\n  font-size: 14px;\n  text-align: center;\n}\n.box .handle {\n  cursor: grab;\n  background-color: #ccc;\n  padding: 5px;\n  margin-bottom: 5px;\n}\n.box .no-drag {\n  cursor: not-allowed;\n  background-color: #fdd;\n  padding: 5px;\n  margin-bottom: 5px;\n}\n.box.no-cursor {\n  cursor: default;\n}\n`;\ndocument.head.appendChild(styleSheet);\n\nReactDOM.render(<App />, document.getElementById('root'));","lang":"typescript","description":"This quickstart demonstrates various configurations of the Draggable component, including basic dragging, axis-locked dragging, handle/cancel selectors, grid snapping, scaling, and controlled positioning. It also shows a basic usage of DraggableCore.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}