search

Noction / vue-draggable-grid

https://noction.github.io/vue-draggable-grid/
81 stars 33 forks source link

maxRows works for resizing, but not for drag/move #29

Closed caiosimonbreda closed 4 months ago

caiosimonbreda commented 7 months ago

The maxRows prop seems to work well in enforcing a limit number of rows when resizing items, but not when moving them. Moving an item into the beginning or middle of a column can make other items in it reshuffle, making this column go beyond the bottom of the container/increasing container height. Setting preventCollision to true "corrects" this behaviour at the expense of UX.

I attempted circumventing this issue by reverting moves which caused the Y position + height of a grid element to go beyond the maximum height of the container, but couldn't find a simple way to do this. An event emitted only when the layout is done updating would make this quite easy, as done in this pull request, but that hasn't been accepted yet.

It seems like maxRows should prevent any drag actions (as well as resizes) that cause any grid items to go beyond the set number of rows.

LwveMike commented 7 months ago

Specified pull request was merged, v1.9.11

caiosimonbreda commented 7 months ago

Thank you @LwveMike, tried a local version with those modifications last night and it did allow me to mitigate the issue in question. I'll see about making a contribution myself to try and get maxRows working as it should. Thank you for picking up maintenance of this package!