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.
Copy 'DragDrop.js' from the components directory into your project. Demo: view the demo here
<DragDrop>
<Child />
</DragDrop>
Note: child element must have a unique id (for now).
<DragDrop handleDrop={this.swap.bind(this)}>
<Child />
</DragDrop>
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>
);
}
- support for multiple children
- change how IDs are handled, if possible
- convert to NPM module
- support for ES5 / ES7(?)
MIT