'How to snap Draggable's to Grid? (Material UI)
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?
Solution 1:[1]
I have used many drag and drop libraries but love this one most. You can give it a try.
There is a story book demo at https://bokuweb.github.io/react-rnd/stories/?path=/story/grid--both. I think that perfectly resolve your problem.
Solution 2:[2]
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
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | ShinaBR2 |
| Solution 2 |