react-draggable 

React draggable component

Based on https://github.com/mzabriskie/react-draggable

Installing

``bash
$ npm install react react-draggable2
`

You will also need install React to your top-level project due to
#2.

Demo

http://mzabriskie.github.io/react-draggable/example/

Example

`js
/* @jsx React.DOM /
var React = require('react'),
Draggable = require('react-draggable');

var App = React.createClass({
handleStart: function (event, ui) {
console.log('Event: ', event);
console.log('Position: ', ui.position);
},

handleDrag: function (event, ui) {
console.log('Event: ', event);
console.log('Position: ', ui.position);
},

handleStop: function (event, ui) {
console.log('Event: ', event);
console.log('Position: ', ui.position);
},

render: function () {
return (
// 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.
//
// 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.
//
// bound determines whether to bound the movement to the parent box.
// - 'top' bounds movement to the top edge of the parent box.
// - 'right' bounds movement to the right edge of the parent box.
// - 'bottom' bounds movement to the bottom edge of the parent box.
// - 'left' bounds movement to the left edge of the parent box.
// - 'all' bounds movement to all edges (default if not specified).
// - 'point' to constrain only the top-left corner.
// - 'box' to constrain the entire box (default if not specified).
//
// constrain takes a function to constrain the dragging.
//
// start specifies the x and y that the dragged item should start at
//
// 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.

axis="x"
handle=".handle"
constrain={constrain(25)}
start={{x: 25, y: 25}}
bound="all box"
zIndex={100}
onStart={this.handleStart}
onDrag={this.handleDrag}
onStop={this.handleStop}>


React.renderComponent(, document.body);
`

Contributing

- Fork the project
- $ npm install && npm run watch
- Make changes
- Add appropriate tests
- $ npm test`
- If tests don't pass, make them pass.
- Update README with appropriate docs.
- Commit and PR

License

MIT