7

我有一组接受可拖动图标的可放置 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

注意当它自动向下滚动时，鼠标悬停在正确的字母上。在视频快结束时，您可以看到，如果您将鼠标悬停在列表的左边距上，它会以某种方式重置并且似乎又可以工作了。

4

2 回答 2

7

为可拖动对象设置“refreshPositions: true”选项将导致 jQuery 重新计算每个鼠标事件的偏移量。那应该可以解决您的问题。

于 2011-03-21T22:26:24.817 回答
0

您也可以尝试使用区间函数：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();
    },
})
于 2014-09-30T15:47:42.447 回答