haltu / muuri

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

[Help wanted] Changing item size based on position / creating a layout with predefined positions #490

Open IlyaGeller opened 3 years ago

IlyaGeller commented 3 years ago

Hi, I'm trying to achieve the following functionality using Muuri:

I would like to have a grid with predefined positions where a list of cards will be displayed based on some parameter (e.g priority). For example, a grid will look like this:

WhatsApp Image 2021-07-13 at 18 46 07

where the card with priority 1 will be placed in the "1" position and be large, and the rest will be placed in their respectful positions and be smaller.

By drag and drop a user should be able to change the position (and therefore priority parameter) of each card, such that if for example I drag the card in position 4 to position 1, then cards 1 and 4 will swap places, and card 4 will now be large and 1 will be small.

I am struggling to generate this custom layout and implement changing sizes based on "priority" parameter.

I would really appreciate if anyone could give me some guidance to how to achieve this behavior.

Thanks alot! :)