/** @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.
            //
            // The element is moved from its current position using absolute positioning.
            //
            // `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.
            //
            // `grid` specifies the x and y that dragging should snap to.
            //
            // `bounds` specifies movement boundaries. Pass:
            // - '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.
            //
            // `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"
                grid={[25, 25]}
                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>
        );
    }
});

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