React DragDrop - lightweight drag and drop to save you time

A component that enables drag and drop functionality for it's child element. Lightweight (< 50 lines of code), useful for ReactJS beginners who want something simple and easy to implement : ) Currently implemented using ES6 and available as a .js file (no npm module). May be extended in the future.

Current Features and Usage

Copy 'DragDrop.js' from the components directory into your project. Demo: view the demo here

Supports single child component

<DragDrop>
    <Child />
</DragDrop>

Note: child element must have a unique id (for now).

Custom 'drop' handler

<DragDrop handleDrop={this.swap.bind(this)}>
        <Child />
</DragDrop>

Style-agnostic

Use the 'dragging' property to style your child component as you please.

App.js

<DragDrop>
    <Child />
<DragDrop>

Child.js

function Child(props) {
...
...
return (
    <div {...props} 
    style = { !props.dragging ? {} : { border: '2px dashed red'} }>
	    { !props.dragging ? <p>Resting</p> : <p>Dragging</p> }
    </div>
);
}

(un)Planned Features

• support for multiple children
• change how IDs are handled, if possible
• convert to NPM module
• support for ES5 / ES7(?)

License

MIT