search

sharedlabs / sortable-list

A web component for reorderable drag-and-drop lists on modern browsers and touch devices.
MIT License
36 stars 21 forks source link

[Feature Request] Scroll support #9

Open KevinAsher opened 7 years ago

KevinAsher commented 7 years ago

First of all, a big thanks for all the work done in this web component. While on mobile, its hard to sort a medium size list of items because of the limited size of the screen, can we add an auto scrolling functionality? I've been working something out, and i'll be glad to make a pull request.

davidmaxwaterman commented 6 years ago

I have a similar problem to the one this is trying to fix, except I am on desktop. I tried to implement the changed in the PR, but my efforts haven't been met with success.

I have my sortable-list in a container div with a height set and overflow-y set to scroll. One problem is that, when I grab one of the items in the list, the whole list would be rendered 'outside' its container, and that looks terrible. The other problem is that I have to manually scroll the list with the mouse-wheel while I am dragging the item.

Your changes fix the first problem, but make the second problem worse. This is because, when I scroll using the mouse wheel, while dragging an item, the item I am dragging scrolls with the list, so it doesn't appear to be under the cursor any more.

Do you have any suggestions?

davidmaxwaterman commented 6 years ago

Looking at your fork and the demo, I see that it also doesn't work if the sortable-list is constrained in size. If you change demo/index.html so that the sortable-list css also has:

        width: 150px;
        height: 300px;
        max-height: 300px;
        overflow-y: auto;

then you will see what happens.