Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/twobin/react-drag-tool
react drag and drop tools
https://github.com/twobin/react-drag-tool
Last synced: about 2 months ago
JSON representation
react drag and drop tools
- Host: GitHub
- URL: https://github.com/twobin/react-drag-tool
- Owner: twobin
- Created: 2017-02-24T06:16:04.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-12T13:45:20.000Z (over 7 years ago)
- Last Synced: 2024-10-29T00:56:39.811Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 18.6 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: History.md
Awesome Lists containing this project
README
# react-drag-tool
react drag and drop tools
[](https://badge.fury.io/js/react-drag-tool)
[](https://travis-ci.org/twobin/react-drag-tool)
[](https://www.npmjs.com/package/react-drag-tool)
## usage
```
$ npm i -S react-drag-tool
```
## docs
### react-drag-tool
```
import DragTool from 'react-drag-tool';
```
### props
```
static propTypes = {
/**
* `axis` determines which axis the draggable can move.
*
* 'both' allows movement horizontally and vertically.
* 'x' limits movement to horizontal axis.
* 'y' limits movement to vertical axis.
*
* Defaults to 'both'.
*/
axis: PropTypes.oneOf(['both', 'x', 'y']),
/**
* `handle` specifies a selector to be used as the handle
* that initiates drag.
*
* Example:
*
* ```jsx
* var App = React.createClass({
* render: function () {
* return (
*
*
* Click me to drag
* This is some other content
*
*
* );
* }
* });
* ```
*/
handle: PropTypes.string,
/**
* `cancel` specifies a selector to be used to prevent drag initialization.
*
* Example:
*
* ```jsx
* var App = React.createClass({
* render: function () {
* return(
*
*
* You can't drag from here
* Dragging here works fine
*
*
* );
* }
* });
* ```
*/
cancel: PropTypes.string,
/**
* `grid` specifies the x and y that dragging should snap to.
*
* Example:
*
* ```jsx
* var App = React.createClass({
* render: function () {
* return (
*
*
I snap to a 25 x 25 grid
*
* );
* }
* });
* ```
*/
grid: PropTypes.arrayOf(React.PropTypes.number),
/**
* `start` specifies the x and y that the dragged item should start at
*
* Example:
*
* ```jsx
* var App = React.createClass({
* render: function () {
* return (
*
*
I start with left: 25px; top: 25px;
*
* );
* }
* });
* ```
*/
start: PropTypes.object,
/**
* Called when dragging starts.
*
* Example:
*
* ```js
* function (event, ui) {}
* ```
*
* `event` is the Event that was triggered.
* `ui` is an object:
*
* ```js
* {
* position: {top: 0, left: 0}
* }
* ```
*/
onStart: PropTypes.func,
/**
* Called while dragging.
*
* Example:
*
* ```js
* function (event, ui) {}
* ```
*
* `event` is the Event that was triggered.
* `ui` is an object:
*
* ```js
* {
* position: {top: 0, left: 0}
* }
* ```
*/
onDrag: PropTypes.func,
/**
* Called when dragging stops.
*
* Example:
*
* ```js
* function (event, ui) {}
* ```
*
* `event` is the Event that was triggered.
* `ui` is an object:
*
* ```js
* {
* position: {top: 0, left: 0}
* }
* ```
*/
onStop: PropTypes.func,
/**
* A workaround option which can be passed if
* onMouseDown needs to be accessed,
* since it'll always be blocked (due to that
* there's internal use of onMouseDown)
*
*/
onMouseDown: PropTypes.func,
/**
* Defines the bounderies around the element
* could be dragged. This property could be
* object or a string. If used as object
* the bounderies should be defined as:
*
* {
* left: LEFT_BOUND,
* right: RIGHT_BOUND,
* top: TOP_BOUND,
* bottom: BOTTOM_BOUND
* }
*
* The only acceptable string
* property is: "parent".
*/
bound: PropTypes.any
};
```