Question

With jQuery sortable, I have a very long list which forces a scrollbar. Whenever it is long enough to do this, every time I grab an item, the page automatically starts scrolling and the LI jumps way off my cursor. It works perfectly whenever I’m using a shorter list. Any help?

Current LI CSS:

min-height: 60px;
margin-top: 12px;
margin-bottom: 10px;
padding: 10px 10px 15px 10px;

background: #FAFAFA;

.roundCorners(3px);
.boxShadow(0,4px,10px,#222);

border: 1px #D4D4D4 solid;

Current jQuery:

    var makeNotesSortable = function () {
        $("#notes").sortable
        ({
            update: function () {
                console.log($("#notes"));
                updateNoteOrder($("#notes"));
            }
        }).disableSelection();
    }

Answer 1

I couldn’t find a solution to this issue, but I turned scrolling off and set the axis to ‘y’ only.

        $("#notes").sortable
        ({
            scroll: false,
            sort: function (event, ui) {
                ui.helper.css({ 'top': ui.position.top + $(window).scrollTop() + 'px' });
            },
            helper: 'clone',
            axis: 'y',
            update: function () {
                updateNoteOrder($("#notes"));
            }
        }).disableSelection();