jQuery UI, Draggable, Droppable, Auto Scroll

Question

I have a set of droppable li elements that accepts a draggable icon. The list of items is in a scrollable div element. I put together a simple example here: http://www.nerdydork

Answer 1

you can also try to use an interval function: http://jsfiddle.net/msszhwzf/6/

for (var i = 0; i < 10; i++) {
    $("#sortableContainer").append('
');
    $("#droppableContainer").append('
');
};

var adding = 0
var scrollInterval = null;

$("#sortableContainer").sortable({
    refreshPositions: true,
    start: function (e, ui) {
        scrollInterval = setInterval(function () {
            var foo = $("#droppableContainer").scrollTop();
            $("#droppableContainer").scrollTop(foo + adding);
        }, 50)
    },
    stop: function (e, ui) {
        clearInterval(scrollInterval);
    },
    sort: function (e, ui) {
        var top = e.pageY - $("#droppableContainer").offset().top
        if (top < 10) {
            adding = -15
        } else if (top > $("#droppableContainer").height() - 10) {
            adding = 15
        } else {
            adding = 0
        }
    },
});
$(".droppable").droppable({
    hoverClass: "active",
    accept: ".sortable",
    drop: function (event, ui) {
        ui.draggable.remove();
    },
})