Simple DND using react

Creating a drop component:

<DragAndDrop drop id="foo" handleDrop={(elId) => yourFunc(elId)} children={<ChildComponentHere/>}>

The handle drop prop is so that you can set state etc or do what you like on drop - the handleDrop used in the component just gets the dragged element id for you and passes it to be used in the function you supply.

Creating a drag component:

<DragAndDrop drag id="bar"children={<ChildComponentHere/>}>