react-draggable
Advanced tools
Comparing version 0.7.2 to 0.7.3
{ | ||
"name": "react-draggable", | ||
"version": "0.7.2", | ||
"version": "0.7.3", | ||
"homepage": "https://github.com/mzabriskie/react-draggable", | ||
@@ -5,0 +5,0 @@ "authors": [ |
@@ -80,1 +80,6 @@ # Changelog | ||
- Added `moveOnStartChange` property. See README. | ||
### 0.7.3 (May 13, 2015) | ||
- Removed a `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/56 |
@@ -486,4 +486,3 @@ 'use strict'; | ||
// React to changes in the 'start' param. | ||
if (newProps.moveOnStartChange && newProps.start && | ||
(newProps.start.x !== this.state.initialStart.x || newProps.start.y !== this.state.initialStart.y)) { | ||
if (newProps.moveOnStartChange && newProps.start) { | ||
this.setState(this.getInitialState(newProps)); | ||
@@ -529,5 +528,3 @@ } | ||
// Current transform x and y. | ||
clientX: props.start.x, clientY: props.start.y, | ||
initialStart: props.start | ||
clientX: props.start.x, clientY: props.start.y | ||
}; | ||
@@ -534,0 +531,0 @@ }, |
{ | ||
"name": "react-draggable", | ||
"version": "0.7.2", | ||
"version": "0.7.3", | ||
"description": "React draggable component", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -35,4 +35,38 @@ # react-draggable [![Build Status](https://travis-ci.org/mzabriskie/react-draggable.svg?branch=master)](https://travis-ci.org/mzabriskie/react-draggable) | ||
## Example | ||
## API | ||
The `<Draggable/>` component transparently adds draggable to whatever element is supplied as `this.props.children`. | ||
**Note**: Only a single element is allowed or an Error will be thrown. | ||
Props: | ||
**`axis`**: determines which axis the draggable can move. Accepted values: | ||
- `both` allows movement horizontally and vertically (default). | ||
- `x` limits movement to horizontal axis. | ||
- `y` limits movement to vertical axis. | ||
**`handle`**: specifies a selector to be used as the handle that initiates drag. | ||
**`cancel`**: specifies a selector to be used to prevent drag initialization. | ||
**`grid`**: specifies the x and y that dragging should snap to. | ||
**`bounds`**: specifies movement boundaries. Accepted values: | ||
- `parent` restricts movement within the node's offsetParent (nearest node with position relative or absolute), or | ||
- 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. | ||
**`start`**: specifies the `x` and `y` that the dragged item should start at. This is generally not necessary to use (you can use absolute or relative positioning of the child directly), but can be helpful for uniformity in your callbacks and with css transforms. | ||
**`moveOnStartChange`**: if true (it defaults false), will move the element if there is a change in `start`. We set this by default to `false` because it can cause unwanted effects if you are not aware of it. | ||
**`zIndex`**: specifies the zIndex to use while dragging. | ||
**`onStart`**: called when dragging starts. | ||
**`onDrag`**: called while dragging. | ||
**`onStop`**: called when dragging stops. | ||
## Example usage | ||
```js | ||
@@ -61,40 +95,2 @@ /** @jsx React.DOM */ | ||
return ( | ||
// <Draggable/> transparently adds draggable interactivity | ||
// to whatever element is supplied as `this.props.children`. | ||
// Only a single element is allowed or an Error will be thrown. | ||
// | ||
// The element is moved from its current position using absolute positioning. | ||
// | ||
// `axis` determines which axis the draggable can move. | ||
// - 'both' allows movement horizontally and vertically (default). | ||
// - 'x' limits movement to horizontal axis. | ||
// - 'y' limits movement to vertical axis. | ||
// | ||
// `handle` specifies a selector to be used as the handle that initiates drag. | ||
// | ||
// `cancel` specifies a selector to be used to prevent drag initialization. | ||
// | ||
// `grid` specifies the x and y that dragging should snap to. | ||
// | ||
// `bounds` specifies movement boundaries. Pass: | ||
// - 'parent' restricts movement within the node's offsetParent | ||
// (nearest node with position relative or absolute), or | ||
// - 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 for more on this. | ||
// | ||
// `start` specifies the x and y that the dragged item should start at. This is generally not necessary | ||
// to use (you can use absolute or relative positioning of the child directly), but can be helpful | ||
// for uniformity in your callbacks and with css transforms. | ||
// | ||
// `moveOnStartChange`, if true (default false), will move the element if there is a change in `start`. | ||
// We set this by default to `false` because it can cause unwanted effects if you are not aware of it. | ||
// | ||
// `zIndex` specifies the zIndex to use while dragging. | ||
// | ||
// `onStart` is called when dragging starts. | ||
// | ||
// `onDrag` is called while dragging. | ||
// | ||
// `onStop` is called when dragging stops. | ||
<Draggable | ||
@@ -112,3 +108,3 @@ axis="x" | ||
<div className="handle">Drag from here</div> | ||
<div>Lorem ipsum...</div> | ||
<div>This readme is really dragging on...</div> | ||
</div> | ||
@@ -123,2 +119,4 @@ </Draggable> | ||
## Contributing | ||
@@ -125,0 +123,0 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
30428
615
138