Subject of the issue
Gridstack's worked out pretty well for me! But I have one chief problem.
Gridstack permanently changes the layout during dragging, which causes contrary outcomes.
In the below example, let's say the user has just placed items 1, 2, and 3, and wants to place a new item to the right of them. But they inadvertently drag the new item across 1, 2 and 3, which moves them away from where they had just placed them (in my app, this is happening constantly because the new item element is to the left of the dashboard):
Now the user has to tediously put items 1, 2, and 3 back in their original position.
Since none of the existing items needed to move out of the way of where the new item was finally dropped, the end result should have been the same as if the user happened to drag the new item around the existing ones:
Gridstack could easily avoid this by remembering the layout at the time the drag operation was started, and always computing the next layout based upon that drag start time layout and the drag hover location. That way, all items that don't need to be moved to accommodate the hovered drop location would retain their starting position. I'm confident this would be a much more user-friendly behavior.
A competing library, Packery, seems to behave the way I'm proposing. If I had known about this at the time I might have chosen it, though it's kind of expensive.
At the very least, I wish it were an option, in case some people for some reason think the current behavior is more expected.
Maybe the existing behavior is more convenient for moving an existing item around in the grid, but I doubt it.
Is there any workaround way I can accomplish this?
I may eventually fork to see if I can solve this for my app, so let me know if you'd be open to a PR.
Your environment
- gridstack version - 4.2.6 + HTML5
- browser/OS - probably irrelevant, but Chrome 92.0.4515.159, macOS 11.5.1
Steps to reproduce
https://jsfiddle.net/mr5y2c9d/3/
- Grab the "Drag me into the dashboard" item
- Move it over item 1
- Move it over item 2
- Move it over item 3
- Drop it to the right of there item 3 was before you grabbed it
Expected behavior
1, 2, and 3 should move out of the way while the grabbed item is hovering over them, but move back into their original place once the grabbed item is no longer in their way (as long as they don't need to move for anything else the grabbed item is directly in the way of)
For example, what I'd expect to see during the repro steps is:
Actual behavior
1, 2, and 3 get moved permanently while grabbed item passes over them, and never move back to their original positions, looking like this:
Subject of the issue
Gridstack's worked out pretty well for me! But I have one chief problem.
Gridstack permanently changes the layout during dragging, which causes contrary outcomes.
In the below example, let's say the user has just placed items 1, 2, and 3, and wants to place a new item to the right of them. But they inadvertently drag the new item across 1, 2 and 3, which moves them away from where they had just placed them (in my app, this is happening constantly because the new item element is to the left of the dashboard):
Now the user has to tediously put items 1, 2, and 3 back in their original position.
Since none of the existing items needed to move out of the way of where the new item was finally dropped, the end result should have been the same as if the user happened to drag the new item around the existing ones:
Gridstack could easily avoid this by remembering the layout at the time the drag operation was started, and always computing the next layout based upon that drag start time layout and the drag hover location. That way, all items that don't need to be moved to accommodate the hovered drop location would retain their starting position. I'm confident this would be a much more user-friendly behavior.
A competing library, Packery, seems to behave the way I'm proposing. If I had known about this at the time I might have chosen it, though it's kind of expensive.
At the very least, I wish it were an option, in case some people for some reason think the current behavior is more expected.
Maybe the existing behavior is more convenient for moving an existing item around in the grid, but I doubt it.
Is there any workaround way I can accomplish this?
I may eventually fork to see if I can solve this for my app, so let me know if you'd be open to a PR.
Your environment
Steps to reproduce
https://jsfiddle.net/mr5y2c9d/3/
Expected behavior
1, 2, and 3 should move out of the way while the grabbed item is hovering over them, but move back into their original place once the grabbed item is no longer in their way (as long as they don't need to move for anything else the grabbed item is directly in the way of)
For example, what I'd expect to see during the repro steps is:
Actual behavior
1, 2, and 3 get moved permanently while grabbed item passes over them, and never move back to their original positions, looking like this: