Is there a library for grid-based drag-n-drop?
Hey, hopefully, the image makes sense. I'm looking for something that would help me implement this. The grid itself is dynamic (configurable) and I'd like to define custom rules for placing the elements on the grid - e.g., for detecting stack bonds. Has anybody ever seen apps or examples online that achieve similar behavior with libraries like dndkit/muuri/something else? Thanks.
4 Replies
Something like react-grid-layout?
Thanks! This one looks great, the only thing I'm not sure about is if they allow creating custom rules for dropping items (to prevent stacking elements on top of each other). Will raise a discussion for this in their repo.
you can also do this with dnd-kit, check out this example - https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/core-draggable-hooks-usedraggable--snap-to-grid
I've seen it before. Seems like there is no "layout engine" in this one and the snap-to-grid example feels limited and buggy - if you zoom in / zoom out the snap-to-grid example (draggable object "runs away" from my cursor). Maybe it's because cells and grid sizes are px-based.
It looks much more flexible/customizable than react-grid-layout though.
I guess the best option I have atm is to try implementing a custom layout logic on top of dndkit.