Skip to content

Commit 6174d8b

Browse files
committed
Add resetState() instance method that parents can call.
1 parent 246fb42 commit 6174d8b

File tree

2 files changed

+25
-1
lines changed

2 files changed

+25
-1
lines changed

README.md

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ Props:
4848
**`cancel`**: specifies a selector to be used to prevent drag initialization.
4949

5050
**`grid`**: specifies the x and y that dragging should snap to.
51-
51+
5252
**`bounds`**: specifies movement boundaries. Accepted values:
5353
- `parent` restricts movement within the node's offsetParent (nearest node with position relative or absolute), or
5454
- An object with `left, top, right, and bottom` properties. These indicate how far in each direction the draggable can be moved. See [example/index.html](https://github.com/mzabriskie/react-draggable/blob/master/example/index.html) for more on this.
@@ -113,6 +113,21 @@ var App = React.createClass({
113113
React.renderComponent(<App/>, document.body);
114114
```
115115

116+
## State Problems?
117+
118+
`<Draggable>` is a stateful component. This means that it is storing its current drag offsets in its internal state.
119+
This can cause problems with certain integrations. For example, if you change the position of the element manually,
120+
`<Draggable>` can get into trouble as it assumes a translation in the DOM. If you see an element jump around the page
121+
when you click it, this is affecting you.
122+
123+
This is an unfortunate side-effect of dragging, which is inherently stateful.
124+
125+
If you move the element manually, you have two options:
126+
127+
1. Feed the `<Draggable>` an `x` and `y` parameter in the `start` param, and change it as you go while setting
128+
`moveOnStartChange` to `true`, or,
129+
2. When moving the `<Draggable>`, ref the element and
130+
[call `resetState()`](https://github.com/STRML/react-resizable/blob/master/lib/Resizable.jsx#L48).
116131

117132

118133
## Contributing

lib/draggable.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -613,6 +613,15 @@ module.exports = React.createClass({
613613
return this.handleDragStart.apply(this, arguments);
614614
},
615615

616+
// Intended for use by a parent component. Resets internal state on this component. Useful for
617+
// <Resizable> and other components in case this element is manually resized and start/moveOnStartChange
618+
// don't work for you.
619+
resetState: function() {
620+
this.setState({
621+
offsetX: 0, offsetY: 0, clientX: 0, clientY: 0
622+
});
623+
},
624+
616625
render: function () {
617626
// Create style object. We extend from existing styles so we don't
618627
// remove anything already set (like background, color, etc).

0 commit comments

Comments
 (0)