search

haltu / muuri

Infinite responsive, sortable, filterable and draggable layouts
https://muuri.dev
MIT License
10.77k stars 644 forks source link

Multiple grids: Replace some items, insert others #498

Closed AydinHassan closed 2 years ago

AydinHassan commented 2 years ago

Hello, first off, sorry this not an issue. I'm just wondering if something is possible as I can't figure it out. If it's not appropriate here, please close!

I would like to move items from one grid to a second, which of course works fine. Secondly, I would like for some items from the initial first grid, to replace some items from the second grid.

https://codepen.io/aydinhassan/pen/yLoYVWO

Basically if you drag a red square on to a yellow square, i'd like the red square to replace the yellow square. If you drag a red square anywhere else (on a green square) insert it as usual.

Is this possible? I've tried with the dragSortPredicate but didn't have much luck. I am a bit of a n00b here!

niklasramo commented 2 years ago

Hey @AydinHassan ! That's a good question and totally possible with Muuri. It's a bit of an advanced case with no documentation or examples anywhere at the moment. In any case, here's an example (with comments) derived from yours: https://codepen.io/niklasramo/pen/mdMVzzX. I took the liberty to assume that you only want sorting happening on drop as that somehow made sense in this kind of scenario. If you need sorting happening while dragging with this kinda of behaviour that's possible too :)

AydinHassan commented 2 years ago

Thanks a lot @niklasramo that is awesome. Really nice work on this library and thanks for the great support! That totally solves my use case.