react-draggable

React draggable component

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

Installing

$ 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

/** @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 (
			// <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.
			//
			// `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.

			<Draggable
				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}>
				<div>
					<div className="handle">Drag from here</div>
					<div>Lorem ipsum...</div>
				</div>
			</Draggable>
		);
	}
});

function constrain (snap) {
  function constrainOffset (offset, prev) {
    var delta = offset - prev;
    if (Math.abs(delta) >= snap) {
      return prev + parseInt(delta / snap, 10) * snap;
    }
    return prev;
  }
  return function (pos) {
    return {
      top: constrainOffset(pos.top, pos.prevTop),
      left: constrainOffset(pos.left, pos.prevLeft)
    };
  };
}

React.renderComponent(<App/>, 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