Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drag an item past the end of a list #521

Open
sbj42 opened this issue Jul 7, 2022 · 2 comments
Open

Drag an item past the end of a list #521

sbj42 opened this issue Jul 7, 2022 · 2 comments
Labels

Comments

@sbj42
Copy link

sbj42 commented Jul 7, 2022

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
Copy link
Author

sbj42 commented Jul 7, 2022

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
Copy link

awgul commented Jan 4, 2023

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

No branches or pull requests

3 participants