{"id":13400544,"url":"https://github.com/react-grid-layout/react-draggable","last_synced_at":"2026-03-16T16:39:50.012Z","repository":{"id":19011672,"uuid":"22234455","full_name":"react-grid-layout/react-draggable","owner":"react-grid-layout","description":"React draggable component","archived":false,"fork":false,"pushed_at":"2025-06-25T18:28:11.000Z","size":3646,"stargazers_count":9231,"open_issues_count":243,"forks_count":1057,"subscribers_count":78,"default_branch":"master","last_synced_at":"2025-09-05T10:50:27.707Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-grid-layout.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-07-24T22:32:16.000Z","updated_at":"2025-09-01T09:02:36.000Z","dependencies_parsed_at":"2024-11-24T04:01:21.618Z","dependency_job_id":"5d47d78f-54d4-46ec-a75a-5fb84163a9ea","html_url":"https://github.com/react-grid-layout/react-draggable","commit_stats":{"total_commits":467,"total_committers":74,"mean_commits":"6.3108108108108105","dds":0.3190578158458244,"last_synced_commit":"a61bd5feaee52f753375ab1955cafe3881b2bc14"},"previous_names":["mzabriskie/react-draggable","strml/react-draggable"],"tags_count":86,"template":false,"template_full_name":null,"purl":"pkg:github/react-grid-layout/react-draggable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-grid-layout%2Freact-draggable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-grid-layout%2Freact-draggable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-grid-layout%2Freact-draggable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-grid-layout%2Freact-draggable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-grid-layout","download_url":"https://codeload.github.com/react-grid-layout/react-draggable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-grid-layout%2Freact-draggable/sbom","scorecard":{"id":124518,"data":{"date":"2025-08-04","repo":{"name":"github.com/react-grid-layout/react-draggable","commit":"eefb704f8d5e706b2f1a697b955ea523dbc80991"},"scorecard":{"version":"v5.2.1-28-gc1d103a9","commit":"c1d103a9bb9f635ec7260bf9aa0699466fa4be0e"},"score":3.3,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#binary-artifacts"}},{"name":"Code-Review","score":4,"reason":"Found 12/30 approved changesets -- score normalized to 4","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#code-review"}},{"name":"Maintained","score":5,"reason":"7 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 5","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 12 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":3,"reason":"7 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-xffm-g5w8-qvg7","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-16T03:25:27.153Z","repository_id":19011672,"created_at":"2025-08-16T03:25:27.153Z","updated_at":"2025-08-16T03:25:27.153Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273760701,"owners_count":25163177,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-05T02:00:09.113Z","response_time":402,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T19:00:53.130Z","updated_at":"2026-03-16T16:39:49.993Z","avatar_url":"https://github.com/react-grid-layout.png","language":"JavaScript","readme":"# React-Draggable\n\n[![CI](https://github.com/react-grid-layout/react-draggable/actions/workflows/ci.yml/badge.svg)](https://github.com/react-grid-layout/react-draggable/actions/workflows/ci.yml)\n[![npm version](https://img.shields.io/npm/v/react-draggable.svg)](https://www.npmjs.com/package/react-draggable)\n[![npm downloads](https://img.shields.io/npm/dt/react-draggable.svg)](https://www.npmjs.com/package/react-draggable)\n[![gzip size](https://img.badgesize.io/https://npmcdn.com/react-draggable/build/web/react-draggable.min.js?compression=gzip)](https://npmcdn.com/react-draggable/build/web/react-draggable.min.js)\n\nA simple component for making elements draggable.\n\n[**[Demo](https://react-grid-layout.github.io/react-draggable/) | [Changelog](CHANGELOG.md)**]\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/6365230/95649276-f3a02480-0b06-11eb-8504-e0614a780ba4.gif\" /\u003e\n\u003c/p\u003e\n\n```jsx\n\u003cDraggable\u003e\n  \u003cdiv\u003eI can now be moved around!\u003c/div\u003e\n\u003c/Draggable\u003e\n```\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Compatibility](#compatibility)\n- [Quick Start](#quick-start)\n- [API](#api)\n  - [Draggable](#draggable)\n  - [DraggableCore](#draggablecore)\n- [Using nodeRef](#using-noderef)\n- [Controlled vs. Uncontrolled](#controlled-vs-uncontrolled)\n- [Contributing](#contributing)\n\n## Installation\n\n```bash\nnpm install react-draggable\n# or\nyarn add react-draggable\n```\n\n```js\n// ES Modules\nimport Draggable from 'react-draggable';\nimport { DraggableCore } from 'react-draggable';\n\n// CommonJS\nconst Draggable = require('react-draggable');\nconst { DraggableCore } = require('react-draggable');\n```\n\nTypeScript types are included.\n\n## Compatibility\n\n| Version | React Version |\n|---------|---------------|\n| 4.x     | 16.3+         |\n| 3.x     | 15 - 16       |\n| 2.x     | 0.14 - 15     |\n\n## Quick Start\n\n```jsx\nimport React, { useRef } from 'react';\nimport Draggable from 'react-draggable';\n\nfunction App() {\n  const nodeRef = useRef(null);\n\n  return (\n    \u003cDraggable nodeRef={nodeRef}\u003e\n      \u003cdiv ref={nodeRef}\u003eDrag me!\u003c/div\u003e\n    \u003c/Draggable\u003e\n  );\n}\n```\n\nView the [Demo](https://react-grid-layout.github.io/react-draggable/) and its [source](/example/example.js) for more examples.\n\n## API\n\n### `\u003cDraggable\u003e`\n\nA `\u003cDraggable\u003e` element wraps an existing element and extends it with new event handlers and styles. It does not create a wrapper element in the DOM.\n\nDraggable 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.\n\nIf the item you are dragging already has a CSS Transform applied, it will be overwritten by `\u003cDraggable\u003e`. Use an intermediate wrapper (`\u003cDraggable\u003e\u003cspan\u003e...\u003c/span\u003e\u003c/Draggable\u003e`) in this case.\n\n#### Props\n\n```ts\ntype DraggableEventHandler = (e: Event, data: DraggableData) =\u003e void | false;\n\ntype DraggableData = {\n  node: HTMLElement,\n  x: number, y: number,\n  deltaX: number, deltaY: number,\n  lastX: number, lastY: number,\n};\n```\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `allowAnyClick` | `boolean` | `false` | Allow dragging on non-left-button clicks |\n| `allowMobileScroll` | `boolean` | `false` | Don't prevent `touchstart`, allowing scrolling inside containers |\n| `axis` | `'both' \\| 'x' \\| 'y' \\| 'none'` | `'both'` | Axis to allow dragging on |\n| `bounds` | `object \\| string` | - | Restrict movement. Use `'parent'`, a CSS selector, or `{left, top, right, bottom}` |\n| `cancel` | `string` | - | CSS selector for elements that should not initiate drag |\n| `defaultClassName` | `string` | `'react-draggable'` | Class name applied to the element |\n| `defaultClassNameDragging` | `string` | `'react-draggable-dragging'` | Class name applied while dragging |\n| `defaultClassNameDragged` | `string` | `'react-draggable-dragged'` | Class name applied after drag |\n| `defaultPosition` | `{x: number, y: number}` | `{x: 0, y: 0}` | Starting position |\n| `disabled` | `boolean` | `false` | Disable dragging |\n| `enableUserSelectHack` | `boolean` | `true` | Add `user-select: none` while dragging |\n| `grid` | `[number, number]` | - | Snap to grid `[x, y]` |\n| `handle` | `string` | - | CSS selector for the drag handle |\n| `nodeRef` | `React.RefObject` | - | Ref to the DOM element. Required for React Strict Mode |\n| `offsetParent` | `HTMLElement` | - | Custom offsetParent for drag calculations |\n| `onDrag` | `DraggableEventHandler` | - | Called while dragging |\n| `onMouseDown` | `(e: MouseEvent) =\u003e void` | - | Called on mouse down |\n| `onStart` | `DraggableEventHandler` | - | Called when dragging starts. Return `false` to cancel |\n| `onStop` | `DraggableEventHandler` | - | Called when dragging stops |\n| `position` | `{x: number, y: number}` | - | Controlled position |\n| `positionOffset` | `{x: number \\| string, y: number \\| string}` | - | Position offset (supports percentages) |\n| `scale` | `number` | `1` | Scale factor for dragging inside transformed parents |\n\n**Note:** Setting `className`, `style`, or `transform` on `\u003cDraggable\u003e` will error. Set them on the child element.\n\n### `\u003cDraggableCore\u003e`\n\nFor users that require full control, `\u003cDraggableCore\u003e` provides drag callbacks without managing state or styles. It does not set any transforms; you must handle positioning yourself.\n\nSee [React-Resizable](https://github.com/react-grid-layout/react-resizable) and [React-Grid-Layout](https://github.com/react-grid-layout/react-grid-layout) for usage examples.\n\n#### Props\n\n`\u003cDraggableCore\u003e` accepts a subset of `\u003cDraggable\u003e` props:\n\n- `allowAnyClick`\n- `allowMobileScroll`\n- `cancel`\n- `disabled`\n- `enableUserSelectHack`\n- `grid`\n- `handle`\n- `nodeRef`\n- `offsetParent`\n- `onDrag`\n- `onMouseDown`\n- `onStart`\n- `onStop`\n- `scale`\n\n## Using nodeRef\n\nTo avoid `ReactDOM.findDOMNode()` deprecation warnings in React Strict Mode, pass a `nodeRef` prop:\n\n```jsx\nfunction App() {\n  const nodeRef = useRef(null);\n\n  return (\n    \u003cDraggable nodeRef={nodeRef}\u003e\n      \u003cdiv ref={nodeRef}\u003eDrag me!\u003c/div\u003e\n    \u003c/Draggable\u003e\n  );\n}\n```\n\nFor custom components, forward both the ref and props:\n\n```jsx\nconst MyComponent = forwardRef((props, ref) =\u003e (\n  \u003cdiv {...props} ref={ref}\u003eDraggable content\u003c/div\u003e\n));\n\nfunction App() {\n  const nodeRef = useRef(null);\n\n  return (\n    \u003cDraggable nodeRef={nodeRef}\u003e\n      \u003cMyComponent ref={nodeRef} /\u003e\n    \u003c/Draggable\u003e\n  );\n}\n```\n\n## Controlled vs. Uncontrolled\n\n`\u003cDraggable\u003e` is a 'batteries-included' component that manages its own state. For complete control, use `\u003cDraggableCore\u003e`.\n\nFor programmatic repositioning while using `\u003cDraggable\u003e`'s state management, pass the `position` prop:\n\n```jsx\nfunction ControlledDraggable() {\n  const nodeRef = useRef(null);\n  const [position, setPosition] = useState({ x: 0, y: 0 });\n\n  const handleDrag = (e, data) =\u003e {\n    setPosition({ x: data.x, y: data.y });\n  };\n\n  const resetPosition = () =\u003e setPosition({ x: 0, y: 0 });\n\n  return (\n    \u003c\u003e\n      \u003cbutton onClick={resetPosition}\u003eReset\u003c/button\u003e\n      \u003cDraggable nodeRef={nodeRef} position={position} onDrag={handleDrag}\u003e\n        \u003cdiv ref={nodeRef}\u003eDrag me or reset!\u003c/div\u003e\n      \u003c/Draggable\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n## Contributing\n\n- Fork the project\n- Run `yarn dev` to start the development server\n- Make changes and add tests\n- Run `yarn test` to ensure tests pass\n- Submit a PR\n\n### Release Checklist\n\n1. Update CHANGELOG.md\n2. Run `make release-patch`, `make release-minor`, or `make release-major`\n3. Run `make publish`\n\n## License\n\nMIT\n","funding_links":[],"categories":["Drag \u0026 Drop","JavaScript","Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-grid-layout%2Freact-draggable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-grid-layout%2Freact-draggable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-grid-layout%2Freact-draggable/lists"}