haltu / muuri

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

Drag an item past the end of a list #521

Open sbj42 opened 2 years ago

sbj42 commented 2 years ago

I'm using Muuri to allow a user to reorder a list of fixed-size rectangles with a horizontal layout. One of my users was trying to drag an item to the end. They clicked the item, dragged it to the right of the last item, and released. But the item went back to where it started. Here is an example codepen demo:

muuri-drag-to-end

Note that a workaround is to pause long enough over the last element, the item will go to the end as desired. But users unfamiliar with how Muuri works may not discover that workaround.

From issue #233 I saw the following comment:

Sorry to say, but with default configuration you can only drop items on top of other items. So there is no empty space where you can drop the item.

In my case I don't need support for dropping to empty spaces in the middle of the layout. The rectangles are all the same size so there are no big gaps. But I was wondering if I can detect a drop into the space "past the end" of the list.

Question 1: The comment says "with default configuration you can only..." - is there an alternative configuration that would allow dropping an item into the space after all other items?

If I could catch the moment that the drop happens, maybe I could write my own logic to detect a drop into the "past the end" space.

Question 2: Can I listen for an event and detect that a drop is about to be cancelled, look at the drop point, then tell Muuri to send the item to the end?

sbj42 commented 2 years ago

I found a hacky workaround by adding a placeholder element during the drag. It's tricky because I also have to remove the placeholder if the element reaches the end to avoid having the placeholder visible as a gap in the list.

See this example: https://codepen.io/sbj42/pen/jOzqbWd

I'm still interested in the answers to the above questions, in the hope of finding a less hacky way.

awgul commented 1 year ago

image

image

I can't place an item in the space available at the end of a row even if there's a place for the item. I can move it from the next to the last position and then again move to the last position and then the place gets activated to drag an item there. Why it can be available at once?