Drag & Drop Grid Layout in React

This is a proof of concept based on Cheng Lou's totally amazing React Motion library:https://github.com/chenglou/react-motion

Really just a proof of concept to see if I could get it working across multiple columns (i.e. no source order reflowing) for a kanban / trello list app I'm working on.

However, I couldn't elegantly solve the issue of variable item heights in calculateVisiblePositions(), so have decided to drop this as it is and move over to react-dnd instead.

If anyone ever figures out how to do this with variable item heights, please let me know!

BY Tim Ramage

codepen demo

See the Pen Drag & Drop Grid Layout in React by Tim Ramage (@tjramage) on CodePen.