search

metafizzy / packery

:bento: Gapless, draggable grid layouts
https://packery.metafizzy.co
4.14k stars 315 forks source link

Packery - drag/drop scrollbar on and off problem #499

Closed marchq closed 6 years ago

marchq commented 6 years ago

We're starting to use Packery for drag/drop support. I'm encountering a problem where our grid elements, in the layout container, move in a chaotic fashion while dragging an element around.

The problem happens when the vertical scrollbar is not visible and then appears as a result of the potential drop location pushing another element down out of view. The problem doesn't seem to go away until you resize the browser window, but it will occur again when the scrollbar appears/disappears. (I also see the problem when the scrollbar is initially visible and then disappears. This happens when removing elements from the container. This is another scenario in our app.)

The elements are rectangular and we have a few predefined widths for them. We use calc for widths to reduce empty space when resizing. The reduced test case contains two width sizes.

This doesn't give a good user experience and makes drag/drop unpredictable. We'd like to keep the behavior where the scrollbar is only visible when necessary. It seems like the gutter might not be resized properly and connected to our non-fixed widths. Is there way to make this work with the scrollbar appearing/disappearing?

Test case: https://codepen.io/mquadri/pen/MVaKyJ/ This needs to be tested in a page where there are initially no scrollbars.

I've attached some animated gifs to show the problem.

(Reproduced this problem with browser size 1303*861)

packery_dragscrollbar_issue

This animation shows a problem when dragging an element down, dropping back to its original position, resizing the window a little, and then dragging that element again. (Reproduced this problem with browser size 1476*861)

packery_dragscrollbar_issue2

desandro commented 6 years ago

Thanks for reporting this issue.

If the scrollbars are causing the issue, you can force the browser to display scrollbars with CSS

html { overflow-y: scroll; }
marchq commented 6 years ago

Understood about forcing the scrollbars, but I'd consider this a workaround which I'd like to avoid.

I was experimenting with calling the resize method in Packery. I think it helped when I called it after I stop dragging anything and before trying to drag again, but it doesn't solve the problem when the scrollbar appears/disappears while dragging. I've been tracing the flow in Packery to understand this issue to see if I could workaround this in my code but I haven't researched the code in depth so that's why I opened this issue. Any thoughts/pointers on trying to use the resize method to work around this? Are there plans to address this problem?

Thanks.

desandro commented 6 years ago

The most elegant solution is going to be forcing a scrollbar with CSS.

Dragging AND resizing is bound to conflict with one another. Dragging takes measurements when dragging first begins. Once you start resizing, logic is likely going to to get twisted.