jQuery UI，可拖动，可放置，自动滚动

Posted 2023-05-08

【中文标题】jQuery UI，可拖动，可放置，自动滚动

【英文标题】：jQuery UI, Draggable, Droppable, Auto Scroll

【发布时间】：2011-07-06 03:12:37

【问题描述】：

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

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

【问题讨论】：

无法像现在在 jQueryTools 中那样使用自动滚动插件。

【参考方案1】：

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

【参考方案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();
    ,
)