haltu / muuri

Infinite responsive, sortable, filterable and draggable layouts
https://muuri.dev
MIT License
10.78k stars 644 forks source link

Dropping items outside target grid after move over it -> back to starting grid? #455

Open Staffman78 opened 3 years ago

Staffman78 commented 3 years ago

Hi, awesome framework. I have an issue that I would like help with.

When I drag an item from grid1 over grid2 but then drop the item outside both grid1 and grid2, the item still moves into grid2. I would like that item to return to original grid (grid1 in this case). How can I achieve that? It seems as once a dragged item has ever been over a grid, it's destined to end up there :-)

Example pictures: Four grids, one gray to the left and three green to the right. muuri1 I move one item over one green grid but changes my mind and drops it outside any grid. muuri2 It still ends up in the green grid. muuri3 I would like the item to return to gray grid since it wasn't dropped in any green grid. Is that possible?

Thanks! //Staffan

indigane commented 2 years ago

I had this same issue.

Or to be more exact, the issue was this: I have a "drop area" that is also a grid. You start dragging from some initial grid, and hover over the drop area grid. I want to display an indicator that says "uh oh, you are about to drop this in the drop area!" or something like that, and I can do that by listening for "receive" on the drop area grid. But if the user changes their mind and leaves the grid, I have no event to disable the indicator.

In my case I was able to work around it because there is no "empty space", only two grids, so I can listen for "receive" on the other grid, if the user changes their mind.

The other solution of course is to use dragMove and calculate the overlaps (or maybe use Muuri utils for that?).

I would be interested if there is a more Correctâ„¢ way to do this.

EDIT: I now realize, that this is more complex than just events, because the item is already migrated from a grid to another, you will have to keep track of the original grid, and migrate it back.