jQuery UI，Draggable，Droppable，自动滚动

我有一套可接受的li元素，它接受一个可拖动的图标。项目列表位于可滚动的div元素中。我在这里举一个简单的例子：http://www.nerdydork.com/demos/dragscroll/jQuery UI，Draggable，Droppable，自动滚动

我想知道是否有方法来拖动可拖动元素时自动滚动元素列表。例如，假设您位于中间的某个位置，例如http://www.nerdydork.com/demos/dragscroll/#j。当您接近div的顶部时，它会开始向上滚动，当您接近div的底部时，它将开始向下滚动。

任何人都知道如何用jQuery来实现这一点？

UPDATE

我越来越近。我在容器div的上部&下部创建了固定div。当它悬停在它上面开始自动滚动使用http://plugins.jquery.com/project/aautoscroll

现在的问题是，当我将鼠标悬停在较低的区域，它搅乱了我可拖动的字母。它只是似乎是自动滚动区域较低的问题。

要见我说的错误，观看这部短片：http://screencast.com/t/JBFWzhPzGfz

注意如何当它autoscrolls下来，悬停不超过右侧字母。在视频的结尾处，您可以看到，如果您将鼠标悬停在列表的左边缘上，则它会以某种方式重置并且似乎再次工作。

来源

2011-02-28 Dustin

不能让它像与自动滚屏插件工作，因为它现在是在jQueryTools。 – 2012-10-19 08:41:55

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

来源

2011-03-21 22:26:24

，你也可以尝试使用间隔函数： 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-30 15:47:42 Achim

jQuery UI，Draggable，Droppable，自动滚动

回答

相关问题