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

请注意，当它自动向下滚动时，悬停不会超过正确的字母。在视频结束时，你可以看到，如果你将鼠标悬停在列表的左边缘，那么它会以某种方式重置并且似乎再次起作用。

Answer 1

为draggable设置“refreshPositions：true”选项将导致jQuery重新计算每个鼠标事件的偏移量。这应该可以解决你的问题。

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

jQuery UI，Draggable，Droppable，Auto Scroll

2 个答案: