react-dragon

A very simple drag and drop component. Did I mention it was simple?

Usage

Properties	Description
onDrop	Required. This is the callback that executes when an item is dropped onto a <Dragon />
allow	Directly translates to event.dataTransfer.effectAllowed. Defaults to "all"
className	Additional css class names. This can be a string or an object. The value will be injected into the classSet React addon
effect	Directly translates to event.dataTransfer.dropEffect. Defaults to "copy"
element	What element to use as the wrapper for the dragon. Defaults to "div"
message	This is the token that will be passed when a <Dragon /> is dropped onto another <Dragon /> it must be JSON serialization compatible.

React.createClass({

  render() {
    return (
      <Dragon message={ 'something' } onDrop={ this._onDrop } element="p">
        { this.props.children }
      </Dragon>
    )
  },

  _onDrop(transmission, receiver) {
    // the transmission is the message from the dragged element
    // the receiver is the message from the dropped element
  }
})