jQuery UI, Draggable, Droppable, Auto Scroll

Question

我有一组可放置的li元素，可以接受可拖动图标。项目列表在一个可滚动的div元素中。我在这里提供了一个简单的示例：http://www.nerdydork.com/demos/dragscroll/ 我想知道是否有一种方法，在拖动可拖动元素时自动滚动元素列表。例如，假设您在中间某个位置，比如http://www.nerdydork.com/demos/dragscroll/#j。当您接近div的顶部时，它将开始向上滚动；当您接近div的底部时，它将开始向下滚动。

有人知道如何使用jQuery实现这一点吗？

更新：

我正在接近目标。我在容器div的上部和下部创建了固定的div。当悬停在其上时，使用http://plugins.jquery.com/project/aautoscroll开始自动滚动。

现在问题是，当我悬停在较低区域时，它会破坏字母的可拖动性。然而，似乎只有较低的自动滚动区域存在问题。

要查看我所说的错误，请观看这个短视频：http://screencast.com/t/JBFWzhPzGfz 请注意，当它向下自动滚动时，悬停不在正确的字母上。在视频的结尾，您可以看到如果将鼠标悬停在列表的左边缘，那么它会以某种方式重置并再次正常工作。

- Dustin

---

无法像现在的jQueryTools一样使用autoscroll插件。 - Gabriel Theron

Answer 1

将可拖动元素的"refreshPositions: true"选项设置为真会导致jQuery在每个鼠标事件上重新计算偏移量。这应该可以解决您的问题。

- Chris Kuehl

Answer 2

你也可以尝试使用间隔函数： http://jsfiddle.net/msszhwzf/6/

for (var i = 0; i < 10; i++) {
    $("#sortableContainer").append('<div class="sortable"></div>');
    $("#droppableContainer").append('<div class="droppable"></div>');
};

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();
    },
})

- Achim