React draggable component
Clone or download
Pull request Compare This branch is 53 commits ahead of enjoylife:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
example
lib
test
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
README.md
bower.json
karma.conf.js
package.json
webpack.config.js

README.md

react-draggable Build Status

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