grid prop unused in handleDragStop #621children prop missing in TypeScript definition #648documentElement.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 nodeRefnodeRef to TypeScript definitionsnodeRef:<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> ); }This can be used for arbitrarily nested components, so long as the ref ends up pointing to the actual child DOM node and not a custom component. Thanks to react-transition-group for the inspiration.
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 #473This 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.<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.scale parameter also while dragging an element. #438process.env.DRAGGABLE_DEBUG checks in cjs/esm. #445Add "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.
This is a major release due to a React compatibility change. If you are already on React >= 16.3, this upgrade is non-breaking.
getDerivedStateFromProps.classNames & prop-types into the build. This should result in marginally smaller bundle sizes for applications that use bundlers.all: inherit instead of background: transparent; to fix selection styles.componentWillMount deprecation.positionOffset prop, which can be Numbers (px) or string percentages (like "10%"). See the README for more.Note: this release has been pulled due to an inadvertent breaking change. See https://github.com/mzabriskie/react-draggable/issues/391
defaultPosition now allows string offsets (like {x: ‘10%’, y: ‘10%’}) then calculates deltas from there. See the examples and the PR #361. Thanks to @tnrich and @eric-burel.DraggableEvent type for Flow consumers. Thanks @elie222.scale prop (#352)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.
.npmignore.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.PropTypes access to prop-types package for React 15.5 (prep for 16)SVGElement, see #162ownerDocument before onStop, fixes #198getComputedStyle error: see #186, #190offsetParent property for an arbitrary ancestor for offset calculations.offsetParent.return false to cancel onDrag breaking on both old and new browsers due to missing typeArg and/or unsupported MouseEventConstructor. Fixes #164.<DraggableCore> wasn't calling back with the DOM node.handle or cancel selectors if the event originates from a child of the handle or cancel.cannot access clientX of undefined on some touch-enabled platforms.position / defaultPosition.global.SVGElement. Fixes JSDOM & #123.<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.<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.user-select prefixing, which may be different than the prefix required for transform.<Draggable> supports both v0.14 and v15.user-select style that is created on the <body> while dragging.<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.'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.window<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.NaN was returning from scroll events due to event structure change.grid into <DraggableCore> directly. It will continue to work on <Draggable>.enableUserSelectHack not properly disabling.allowAnyClick option to allow other click types.resetState() instance methodmoveOnStartChange prop0.14 support only.<DraggableCore> element upon which <Draggable> is based. This module is useful for building libraries and is completely stateless.transform attribute instead of style. Thanks @martinRosse.changedTouches check.resetState() instance method for use by parents. See README (“State Problems?”).0,0 would cause the element to remain in an inaccurate position, because the translation was removed from the CSS. See #55.moveOnStartChange optimization that was causing problems when attempting to move a <Draggable> back to its initial position. See https://github.com/STRML/react-grid-layout/issues/56moveOnStartChange property. See README.start param is back. Pass {x: Number, y: Number} to kickoff the CSS transform. Useful in certain cases for simpler callback math (so you don't have to know its existing relative position and add it to the dragged position). Fixes #52.bounds with coordinates was confusing because it was using the item's width/height, which was not intuitive. When providing coordinates, bounds now simply restricts movement in each direction by that many pixels.false.grid option was active.user-select:none hack to document.body for better highlight prevention.bounds option to restrict dragging within parent or within coordinates."browser" config to package.json for browserify imports (fix #45).emptyFunction and React.addons.classSet imports.react directly).