React-drag NPM

react-drag

React draggable component. Fork of react-draggable.

Compatible with React 16, thanks to @james-ecargo.

Installing

$ npm i react-drag

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.
      //
      // `grid` specifies the x and y that dragging should snap to.
      //
      // `start` specifies the x and y that the dragged item should start at
      //
      // `bound` specifies the bound rectangle, it may has value "parent", which bounds the drag by the parent
      //
      // `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]}
        start={{x: 25, y: 25}}
        bound={{left: 20, top: 20, bottom: 80, right: 80 }}
        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);