JSFiddle of Draggable Source about react-dnd HOT 6 CLOSED

/** @jsx React.DOM */

var DragDropMixin = ReactDND.DragDropMixin;

var ItemTypes = {
  PERSON: 'person'
};

// Drag source
var Person = React.createClass({
  mixins: [DragDropMixin],

  propTypes: {
    name: React.PropTypes.string,
    isInBox: React.PropTypes.bool
  },

  configureDragDrop: function (registerType) {
    registerType(ItemTypes.PERSON, {
      dragSource: {
        canDrag: function () {
          return !this.props.isInBox;
        },

        beginDrag: function () {
          return {
            item: { name: this.props.name }
          };
        }
      }
    });
  },

  render: function() {
    return (
      <div className='Person'
           {...this.dragSourceFor(ItemTypes.PERSON)}>
        {this.props.name}
      </div>
    );
  }
});

// Drop target
var Box = React.createClass({
  mixins: [DragDropMixin],

  propTypes: {
    inside: React.PropTypes.arrayOf(React.PropTypes.string),
    onAddPerson: React.PropTypes.func.isRequired
  },

  configureDragDrop: function (registerType) {
    registerType(ItemTypes.PERSON, {
      dropTarget: {
        acceptDrop: function (person) {
          // Specify action on drop
          this.props.onAddPerson(person.name);
        }
      }
    });
  },

  render: function () {
    return (
      <div className='Box'
           {...this.dropTargetFor(ItemTypes.PERSON)}>

        <h3>Drop folks here!</h3>

        {this.props.inside.map(function (name) {
          return <Person name={name} key={name}
                         isInBox />;
        })}
      </div>
    );
  }
});

var App = React.createClass({
  getInitialState: function () {
    return {
      outsideBox: [
        'Pete',
        'Ryan',
        'Andrey',
        'Anita'
      ],
      insideBox: []
    };
  },

  render: function () {
    return (
      <div>
        <h1>These folks are not yet in the box:</h1>

        {this.state.outsideBox.map(function (name) {
          return <Person name={name} key={name} />;
        })}
        <hr />

        <Box inside={this.state.insideBox}
             onAddPerson={this.handleAddPerson} />
      </div>
    )
  },

  handleAddPerson: function (name) {
    this.setState({
      outsideBox: this.state.outsideBox.filter(function (n) { return n !== name }),
      insideBox: this.state.insideBox.concat([name])
    });
  }
})

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