drag-and-drop

example.jsx

var Item = React.createClass({
  propTypes: {
    document: React.PropTypes.object.required
  },
  
  _handleDrag: function(position){
    this.setState({ 
      dragging: true,
      dragPosition: position
    });
  },
  
  _handleDrop: function(position){
    this.setState({ dragging: false });
  },
  
  render: function(){
    return (
      <Draggable
        zone: {this.props.document.id}
        onDrag: {this._handleDrag}
        onDrop: {this._handleDrop}>
        
        <div className={this.state.dragging && "dragging"}>
          Drage me please
        </div>
        
      </Draggable>
    );
  }
});

var Draggable = React.createClass({
  propTypes: {
    zone: React.PropTypes.number.required
    onDrag: React.PropTypes.func.required
    onDrop: React.PropTypes.func.required
  },
  
  componentDidMount: function(){
    var node = React.findDOMNode(this.refs.dragTarget)
    node.addEventListener("mousedown", this._handleDrage.bind(this));
  },
  
  _handleDrag: function(event){
    node.addEventListener("mousemove", this._handleMove.bind(this));
    node.addEventListener("mouseup", this._handleDrop.bind(this));
    this.setState({
      position: {x: event.clientX, y: event.clientY})
    });
  },
  
  _handleMove: function(event){
    this.props.onDrag(this.state.posotion)
  },
  
  _handleDrop: function(event){
  },
  
  render: function(){
    // https://stackoverflow.com/questions/29568721/getting-dom-node-from-react-child-element
    // https://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html
    return React.cloneElement(this.props.children[0], { ref: dragTarget });
  }
});