search

desandro / draggabilly

:point_down: Make that shiz draggable
https://draggabilly.desandro.com
MIT License
3.86k stars 386 forks source link

Drag+Scroll problem within an overflown scrollable container #202

Closed lmarciano9 closed 5 years ago

lmarciano9 commented 5 years ago

Hello!

I have run into a problem when using draggable items inside a container that is height limited with an overflow: scroll attribute in CSS. When an element is dragged and the mouse wheel is used to scroll while dragging is performed, e.g. to take it to the bottom part of the container, the element does not follow the cursor properly.

Below is a reduced test case showing the issue. In it, there are two containers: The first one is limited by height with overflow: scroll, which shows this problem. The second one does not, which doesn't show the problem described. But the drawback is, I cannot limit its height. The reason I need the height limited is that I need the draggable items contained inside an element that cannot grow in height, therefore I have it scroll in case of overflow.

Reduced Test Case: https://codepen.io/lmarciano/pen/OqRVdg

Where did I test this on? OS: Windows 10 x64 Browsers: Chrome 72 and Firefox Quantum 65.0.2

In case my explanation of how to reproduce the problem inside the test case isn't clear, I also attached the following GIF showcasing the problem in the CodePen linked above.

saGRXtGh1p

Is there anything I could do to be able to have the draggable element follow the cursor properly after scrolling inside the first container? Thanks in advance for the attention.

desandro commented 5 years ago

Thanks for reporting this issue and going into so much detail about the issue. Draggabilly does not support scrolling the scrollable area so the draggable element can move anywhere with in it. I have opened an issue to track interest in this feature. Please add your 👍 to #1.

To keep discussion all in one place, I'm going to close this issue here.