search

thisbeyond / solid-dnd

A lightweight, performant, extensible drag and drop toolkit for Solid JS.
https://solid-dnd.com
MIT License
505 stars 35 forks source link

Bento Draggable Layout #100

Open nomercy360 opened 1 year ago

nomercy360 commented 1 year ago

Hi, what is the best way to implement a bento.me like behaviour? which package utilities can be used, which example will more close? Kind of Draggable Masonry layout where i can have items with different width and height and they will fit inside some area

63ea5abefbeb7e96b8d77a3f_desktop video small-transcode.webm

martinpengellyphillips commented 1 year ago

Hmmm. You'd likely need to implement a custom collision detector and custom transformers to compute the layout. Looking at the sortable implementation is potbelly useful.

Alternatively, you could try actually moving things around in a standard css grid layout and then calling recomputeLayouts 🤔

I might try creating an example for this in future so do share if you get anywhere with it.

nomercy360 commented 1 year ago

Hi, thanks for reply. Decided to go with https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html for now. It fits perfect for task like this