NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →
npm · #3650 most downloaded on npm
React draggable component
Last release 18 days ago
16 Sep 2026
Release timing varies
gaps range from 3 weeks to 1.7 years
Nearly every release is documented
notes for 59 of the last 60 stable releases
2 versions withdrawn
withdrawn after publishing
12 years old
84 releases · first in 2014
Nothing published for this version
Fix: props are no longer marked required under React 18 TypeScript. Regression in 4.6.0. The propTypes static was a required member of the public type
propTypes static was a required member of the public type; React 18's JSX LibraryManagedAttributes consults propTypes when it is required, and doing so cancels the optionality defaultProps normally grants. React 19 ignores propTypes, which is why the v19-only type check missed it. make lint now also type-checks the public surface against @types/react@18. (#809, closes #807)process access in the debug logger so browser bundlers that do not shim process no longer crash on import. (#810, closes #806)One column per quarter.
Feature: add a nonce prop to support a strict Content Security Policy. It's applied to the dynamically-injected user-select element so a style-src pol
nonce prop to support a strict Content Security Policy. It's applied to the dynamically-injected user-select <style> element so a style-src policy without 'unsafe-inline' no longer blocks it. When omitted, webpack's __webpack_nonce__ global is used if available. enableUserSelectHack={false} remains a no-prop opt-out. (#808, closes #791)tsc compilation in the build/CI pipeline.Internal: Migrate library source from Flow to TypeScript. Types are now generated from source instead of hand-maintained, eliminating Flow/TypeScript
module.exports === Draggable, plus .default and .DraggableCore), the UMD ReactDraggable global, and the shipped type surface are all unchanged. (#805)exports map alongside the existing CommonJS entry, so the package can be imported natively in both module systems. (#805)Fix: bounds="selector" functionality when in a Shadow DOM tree.
Fix: state inconsistency in React 18 #699
Fix: grid prop unused in handleDragStop #621
grid prop unused in handleDragStop #621children prop missing in TypeScript definition #648Fix: Ensure documentElement.style actually exists. Fixes crashes in some obscure environments. #574 #575
documentElement.style actually exists. Fixes crashes in some obscure environments. #574 #575peerDependencies again to fix Yarn PnPclassnames with clsx to save a few bytesref functionality and additional README content on nodeRefAdd nodeRef to TypeScript definitions
nodeRef to TypeScript definitionsFix: Remove "module" from package.json (it is no longer being built)
Fix: Remove "module" definition in package.json
If running in React Strict mode, ReactDOM.findDOMNode() is deprecated. Unfortunately, in order for to work properly, we need raw access to the underly…
nodeRef:
<Draggable> to work properly, we need raw access
to the underlying DOM node. If you want to avoid the warning, pass a nodeRef
as in this example:function MyComponent() {
const nodeRef = React.useRef(null);
return (
<Draggable nodeRef={nodeRef}>
<div ref={nodeRef}>Example Target</div>
</Draggable>
);
}
nodeRef is also available on <DraggableCore>.There is nothing special in the browser build that is actually practical for modern use. The "browser" field, as defined in https://github.com/defunctzombie/package-browser-field-spec#overview, indicates that you should use it if you are directly accessing globals, using browser-specific features, dom manipulation, etc.
React components like react-draggable are built to do minimal raw DOM manipulation, and to always gate this behind conditionals to ensure that server-side rendering still works. We don't make any changes to any of that for the "browser" build, so it's entirely redundant.
This should also fix the "Super expression must either be null or a function" error (#472) that some users have experienced with particular bundler configurations.
The browser build may still be imported at "build/web/react-draggable.min.js". This is to prevent breakage only. The file is no longer minified to prevent possible terser bugs.
The browser build will likely be removed entirely in 5.0.
bounds optional in TypeScript #473Fixed a serious bug that caused not to pass styles.
This is a bugfix release.
<DraggableCore> not to pass styles.
React.cloneElement has an odd quirk. When you do:return React.cloneElement(this.props.children, {style: this.props.children.props.style});
style ends up undefined.babel-loader cache does not invalidate when it should. I had modified webpack.config.js in the last version but it reused stale cache.Fix setState warning after dismount if drag still active. Harmless, but prints a warning. #424
<Draggable>.
<Draggable> were not scrollable on touch devices due to the outer container having touch-action: none.
e.preventDefault(). However, due to changes in Chrome >= 56, this is only possible on
non-passive event handlers. To fix this, we now add/remove the touchEvent on lifecycle events rather than using React's event system.Fix: Apply scale parameter also while dragging an element. #438
Add "module" to package.json. There are now three builds:
Add "module" to package.json. There are now three builds:
"main": ES5-compatible CJS build, suitable for most use cases with maximum compatibility.
module.exports = Draggable;
module.exports.default = Draggable;
module.exports.DraggableCore = DraggableCore;
"web": Minified UMD bundle exporting to window.ReactDraggable with the same ES compatibility as the "main" build."module": ES6-compatible build using import/export.This should fix issues like https://github.com/STRML/react-resizable/issues/113 while allowing modern bundlers to consume esm modules in the future.
No compatibility changes are expected.
Add typings and sourcemap to published npm package.
Republish to fix packaging errors. Fixes #426
Republish of 4.0.0 to fix a mistake where webpack working files were erroneously included in the package. Use this release instead as it is much small
Use all: inherit instead of background: transparent; to fix selection styles.
all: inherit instead of background: transparent; to fix selection styles.
Fix React 16.9 componentWillMount deprecation.
componentWillMount deprecation.Addition of positionOffset prop, which can be Numbers (px) or string percentages (like "10%"). See the README for more.
positionOffset prop, which can be Numbers (px) or string percentages (like "10%"). See the README for more.Reverted https://github.com/mzabriskie/react-draggable/pull/361.
Bugfix: Minor type change on DraggableEventHandler TypeScript export
Bugfix: Remove process.browser which is missing in browser
scale prop (#352)
Bugfix: Fix crash in test environments during removeUserSelectStyles().
Bugfix: Fix "Cannot call property 'call' of undefined" (matchesSelector)
Bugfix: Fix deprecation warnings caused by import * as React (Flow best practice).
import * as React (Flow best practice).
> 3.0.0 and 3.0.1 have been unpublished due to a large logfile making it into the package.
3.0.0 and 3.0.1 have been unpublished due to a large logfile making it into the package.
.npmignore.Bugfix: Flow-type should no longer throw errors for consumers.
> Due to an export change, this is semver-major.
Due to an export change, this is semver-major.
<Draggable> is now exported as module.exports and module.exports.default.user-select: none on all elements while dragging. Instead,
the ::selection psuedo element is used.
x/y to callbacks. See #226.Bugfix: Missing export default on TS definition (thanks @lostfictions)
Bugfix: Typescript definition was incorrect. #244
Internal: Moved PropTypes access to prop-types package for React 15.5 (prep for 16)
PropTypes access to prop-types package for React 15.5 (prep for 16)Bugfix: Fix an issue with the entire window scrolling on a drag on iDevices. Thanks @JaneCoder. See #183
Bugfix: Fix references to global when grabbing SVGElement, see #162
Bugfix: Fix getComputedStyle error: see #186, #190
getComputedStyle error: see #186, #190Addition: offsetParent property for an arbitrary ancestor for offset calculations.
offsetParent property for an arbitrary ancestor for offset calculations.
offsetParent.
Bugfix: Fix return false to cancel onDrag breaking on both old and new browsers due to missing typeArg and/or unsupported MouseEventConstructor. Fixes
return false to cancel onDrag breaking on both old and new browsers due to missing typeArg and/or
unsupported MouseEventConstructor. Fixes #164.Bugfix: wasn't calling back with the DOM node.
<DraggableCore> wasn't calling back with the DOM node.Fix improperly missed handle or cancel selectors if the event originates from a child of the handle or cancel.
handle or cancel selectors if the event originates from a child of the handle or cancel.
Fix cannot access clientX of undefined on some touch-enabled platforms.
Finally fixed the IE10 constructor bug. Thanks @davidstubbs #158
This is a breaking change. See the changes below in the beta releases.
position / defaultPosition.global.SVGElement. Fixes JSDOM & #123.Flow comments are now in the build. Other projects, such as React-Grid-Layout and React-Resizable, will rely on them in their build and export their o
We're making a small deviation from React Core's controlled vs. uncontrolled scheme; for convenience, s with a position property will still be draggab
<Draggable>s with a position property will still be draggable, but will revert to their old position
on drag stop. Attach an onStop or onDrag handler to synchronize state.
<Draggable> controlled but attach no callback
handlers, a warning will be printed.Due to API changes, this is a major release.
<DraggableCore> and <Draggable> have had their callback types changed and unified.type DraggableEventHandler = (e: Event, data: DraggableData) => void | false;
type DraggableData = {
node: HTMLElement,
// lastX + deltaX === x
x: number, y: number,
deltaX: number, deltaY: number,
lastX: number, lastY: number
};
start option has been renamed to defaultPosition.zIndex option has been removed.offsetParent.
This method allows us to support arbitrary nested scrollable ancestors without scroll handlers!
<Draggable> now has a position attribute. Its relationship to defaultPosition is much like
value to defaultValue on React <input> nodes. If set, the position is fixed and cannot be mutated.
If empty, the component will manage its own state. See #140
for more info & motivations.Major improvements to drag tracking that now support even nested scroll boxes.
Fix user-select prefixing, which may be different than the prefix required for transform.
user-select prefixing, which may be different than the prefix required for transform.Republished after 1.3.5 contained a bundling error.
Bugfix: Scrolling while dragging caused items to move unpredictably.
Bugfix: #116: Android/Chrome are finicky; give up on canceling ghost clicks entirely.
Bugfix: #116: Child inputs not focusing on touch events.
Internal: Babel 6 and Flow definitions
Possibly breaking change: bounds are calculated before fires drag events, as they should have been.
<Draggable> fires drag events, as they should have been.'none' axis type. This allows using <Draggable> somewhat like <DraggableCore> - state will be kept
internally (which makes bounds checks etc possible), but updates will not be flushed to the DOM.Added arbitrary boundary selector. Now you don't have to just use 'parent', you can select any element on the page, including 'body'.
'parent', you can select any element
on the page, including 'body'.<Draggable> is unmounted while dragging.<DraggableCore> handles deltas only and does not keep state. Added new state
properties slackX and slackY to <Draggable> to handle this and restore pre-v1 behavior.Bugfix: Server-side rendering with react-rails, which does bad things like mock window
windowBugfix: was calling back with clientX/Y, not offsetX/Y as it did pre-1.0. This unintended behavior has been fixed and a test has been added.
<Draggable> was calling back with clientX/Y, not offsetX/Y as it did pre-1.0. This unintended
behavior has been fixed and a test has been added.Bugfix: Clean up scroll events if a component is unmounted before drag stops.
NaN was returning from scroll events due to event structure change.Move grid into directly. It will continue to work on .
grid into <DraggableCore> directly. It will continue to work on <Draggable>.Your coding agent can read these notes before it upgrades. Set up the MCP server →