vue-grid-layout max-rows overflows on reorder

When max-rows is set, columns can have more than max-rows rows when items are dragged into said row.

For a specific example: I have an 8x4 layout with 4 rows and 8 columns. When I fill the first column with 4 rows, then I drag an item into the column in the middle ([0,2]), then the last item gets pushed down. When I finish the drag event, the first column now has 5 rows, which is more than max rows.

Proposed fixes:

prevent dragging into a full row.
When dragging into a full row, overflow the item out of the row. Place it in the first unused row in the first non-full column.

Feb 28 '18 23:02 aarcane

+1 very problematic

Apr 27 '18 20:04 pat123456

+1

Oct 22 '18 14:10 gracefullight

Any headway on this? It's a problem for me also

Nov 06 '18 23:11 SethMcFarland

+1

Dec 04 '18 19:12 hz47

why not work max-rows?

Dec 21 '18 19:12 SavaJankovic

+1

Mar 30 '19 08:03 wmq2015

+1

May 08 '19 11:05 boriskogan81

+1

May 21 '19 22:05 igormatkovic

+1

Jul 16 '19 08:07 anniestudent

anyone have any idea?

Dec 05 '19 21:12 vohzd

+1

Apr 21 '20 03:04 zggcl

+1

Jun 02 '20 05:06 cosfun

+1

Sep 07 '20 12:09 Aljodomo

+1 for the unexpected behavior.

However, there are ways you can circumvent this. Personally, I fill my grid upfront so every spot is taken. The next thing you can do is listen to the moveEvent and swap the currentItem with the swappedItem (own names, don't shoot me) if the x value of the currentItem is not the same as the newX.

Example Code:

We want a grid of 5x5

1. Fill Grid beforeMount () { for (let i = 0; i < 25; i++) { this.layout.push({ i: i, x: (i % 5), y: Math.floor(i / 5), w: 1, h: 1, static: false }) } },

2. React to moveEvent methods: { moveEvent: function (i, newX, newY) { const currentItem = this.layout.filter((item, index) => { return i === index })[0] if (currentItem.x !== newX) { const swappedItem = this.layout.filter((item, index) => { return item.x === newX && item.y === newY })[0] swappedItem.x = currentItem.x swappedItem.y = currentItem.y } } },

Example Video:

https://user-images.githubusercontent.com/3932284/104223815-6a212b00-5444-11eb-9173-654789b709ed.mov

Jan 11 '21 18:01 dhondtlaurens

+1

I am having the same issues however I have tried implimenting the solution above and this works great for items in the grid that are only 1x1 it starts to struggle when you have a mixture of sizes for the items.

It would be great if we could have functionality or a property that stops the items from overflowing out of the grid and out of the parent container.

The prevent collision property seems to be as close as I can get at the moment but this then doesn't allow items to be "swapped" only placed in free space.

Any idea on when this issue would be solved as it seems like a lot of people are having the same problem hence the duplicates of this issues.