Vertical scrolling doesn't work when user needs to drag item to position outside of screen?

[MatthijsM]

My page uses the jquery-sortable plugin to allow a user to sort a nested list (only two levels deep) of groups and items. I ran into a bit of a problem with my sortable list when the size of the list exceeds the size of the screen. If the user attempts to drag an item to a group beyond the bottom of the screen, the screen doesn't scroll down to show the desired drop location. You can force it to scroll by using the mouse's scroll wheel while dragging the item but that is awkward and not very intuitive.

I also tried moving the scroll bar to the list and the results were worse. I did this by setting the list's max-height to the size of the screen and specifying an overflow-y of "auto". It still doesn't auto scroll and if you use the scroll wheel you can get to the desired drop location but the plugin won't let you drop it there. I basically can't drop to any groups (my sub lists) that weren't visible when I started the drag.

I really like this flexible plugin though! Thanks.

[LordA98]

Hi,

I also had this problem. I know this a very late answer for this question, but incase anyone else needs it.

The docs say to add 'scroll: true', but this didn't solve it for me, so I had to implement some JQuery to do it.

A bit of background:

• I used a sortable list for a menu for a pub website that I am developing for a client. This menu would far exceed what was on screen. Using a normal mouse would be fine - the user could scroll using the scroll wheel. However, this didn't cater for laptops.

This was my solution:

    $(window).mousemove(function (e) {
        // this is needed for some reason - prevents animation continuing after it shouldn't
        $('html, body').animate({});
        
        // define areas for when it should scroll up and down
        var bodyRect = document.body.getBoundingClientRect(); // get screen / window size
        var bottomArea = bodyRect.height - 50;
        var topArea = 100;
        
        if($('.dragged').length === 1) {
            var elemRect = document.querySelector('.dragged').getBoundingClientRect();
            
            // scroll down when cursor is near bottom of screen
            if (elemRect.top > bottomArea) {
                $('html, body').animate({
                    scrollTop: 10000 // adjust - number of px to scroll down
                }, 20000); // increase this to slow the scroll
            }
            // scroll up when cursor is near top of screen
            else if (elemRect.top < topArea) {
                console.log(elemRect.top + '<' + topArea);
                // Up
                $('html, body').animate({
                    scrollTop: 0 // 0 = top
                }, 7000); // again, adjust for speed
            }
            // ensure no scroll animation is happening when mouse is anywhere other than top or bottom areas
            else {
                $('html, body').stop();
            }
        }
    });

[arruw]

This is very annoying and make it not useful for bigger lists. Any update on this?