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/>}>