max-rows overflows on reorder

aarcane commented 6 years ago

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: 1) prevent dragging into a full row. 2) 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.

pat123456 commented 6 years ago

+1 very problematic

gracefullight commented 5 years ago

+1

SethMcFarland commented 5 years ago

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

hz47 commented 5 years ago

+1

SavaJankovic commented 5 years ago

why not work max-rows?

wmq2015 commented 5 years ago

+1

boriskogan81 commented 5 years ago

+1

igormatkovic commented 5 years ago

+1

anniestudent commented 5 years ago

+1

vohzd commented 4 years ago

anyone have any idea?

zggcl commented 4 years ago

+1

cosfun commented 4 years ago

+1

Aljodomo commented 4 years ago

+1

dhondtlaurens commented 3 years ago

+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

samwilcock commented 3 years ago

+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.