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 nodeRef
nodeRef
to TypeScript definitionsnodeRef
:
If running in React Strict mode, ReactDOM.findDOMNode() is
deprecated. Unfortunately, in order for <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.
For legacy reasons, this has exports of the following shape, which ensures no surprises in CJS or ESM polyfilled environments:
.exports = Draggable;
module.exports.default = Draggable;
module.exports.DraggableCore = DraggableCore; module
"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.= (e: Event, data: DraggableData) => void | false;
type DraggableEventHandler = {
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).