{
// Called when dragging starts. If `false` is returned from this method,
// dragging will cancel.
// These callbacks are called with the arity
// (event: Event,
//  {
//     position: {left: number, top: number},
//     deltaX: number,
//     deltaY: number
//  }
// )
onStart: Function,

// Called while dragging.
onDrag: Function,

// Called when dragging stops.
onStop: Function,

// Called whenever the user mouses down. Called regardless of handle or
//  disabled status.
onMouseDown: Function,

// 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.
start: {x: number, y: number},

// If true, will not call any drag handlers.
disabled: boolean,

// Specifies a selector to be used to prevent drag initialization.
// Example: '.body'
cancel: string,

// Specifies a selector to be used as the handle that initiates drag.
// Example: '.handle'
handle: string,

// 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.
axis: string,

// 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.
bounds: {left: number, top: number, right: number, bottom: number} | string,

// Specifies the x and y that dragging should snap to.
grid: [number, number],

// Specifies the zIndex to use while dragging.
zIndex: number
}

/** @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
				axis="x"
				handle=".handle"
				start={{x: 0, y: 0}}
				moveOnStartChange={false}
				grid={[25, 25]}
				zIndex={100}
				onStart={this.handleStart}
				onDrag={this.handleDrag}
				onStop={this.handleStop}>
				<div>
					<div className="handle">Drag from here</div>
					<div>This readme is really dragging on...</div>
				</div>
			</Draggable>
		);
	}
});

React.renderComponent(<App/>, document.body);

{
  node: Node
  position:
    {
    	// lastX + deltaX === clientX
      deltaX: number, deltaY: number,
      lastX: number, lastY: number,
      clientX: number, clientY: number
    }
};