How to snap Draggable's to Grid? (Material UI)

Question

I am trying to make a card that is draggable, which is layered on top of a grid, and when moved, I want it to snap to the different sections of the Grid. I am able to create the grid with the columns and rows and also a draggable item, but I am not sure as to whether the snap to grid is possible with Material UI. Is there a way to do this by using Material UI and ReactJS?

If not possible with Material UI, is there another dependency I can use to achieve this?

Answer 1

react-dnd is compatible with Material UI and lets you create a drag layer and snap to a grid.

See react-dnd's basic demo here

And here is how you can extend it to things like: snapping, grid constraints, render arbitrary child components, reordering children