Feature: PreventCollision move rows

[AntoninoBonanno]

Hi, I'm using this setup

• compactType = "horizontal"
• preventCollision = "true"

I would like that by moving element 8 above element 11, it positions itself between element 5 and element 11 moving the whole row down (both element 11 and element 7 move down)

I would like to have this functionality without giving up the other functionality given by the attributes compactType = "horizontal" and preventCollision = "true". Or in any case I would need the lines to be locked: if I move an element up it must be possible to insert it only if there is space in that line otherwise it creates a new line. Same reasoning below if I move the element up the elements of the rows down shouldn't move. (Items in a row must be locked to that row and not move to other rows)

I thought of implementing this by catching the "dragStarted", "dragEnded" events and updating the layout manually, but the y of the element doesn't change when you drop it on another element (with preventCollision="true") and there is no event that is triggered on each change of x/y (dragging)

Surely there is a better way to implement this within the library

Thank you

[llorenspujol]

Hi @AntoninoBonanno !

I understand what you want. IMO your use case is quite niche and specific, so the only solution that comes to my mind is giving you the tools to write your own moveElement and compact functions. This would be a quite hardcore solution, but you will be able to do what you want... Said that, this solution is not to my liking, but we should solve your issue somehow.

What are your feelings about it?

[AntoninoBonanno]

I think it could be a useful feature for many people to keep rows sorted even when moving an element from below.

If your point of view is different, your solution might be fine.
A dragging event, which tells you what position the dragged element is in as it moves can also help.

Thank you

[llorenspujol]

If this could be a useful better, it would be better integrated within the library, I agree. "Plugin" ways to solve features are always the worst and most problematic, but sometimes is the only way...

Let's see, you say to move entire rows if there is collision, this sounds good, but what do you do in a layout like this for example?

Here rows are not that well defined, In your examples, each grid item had the same height, but this may not happen in other layouts. What are your thoughts on a layout like this?
Maybe this configuration should not be possible in a layout like you describe, so things get easier.

[AntoninoBonanno]

You are right, I use elements with the same height (I block the element height from code, minH = maxH = h = 2)

With a more complex template like this it is more difficult to maintain this logic. I would probably move all elements below the new element position down, thus creating a row in the new element position with the same height as the element.

So if I move element 20 above element 14, elements 14,9, 0, 15, 16, 19, 7, 13, 4 move down. But I don't know if this is a good use case for this kind of template.

[AntoninoBonanno]

@llorenspujol any updates for this?