jQuery UI，Draggable，Droppable，Auto Scroll

我有一组可放置的li元素，它们接受一个可拖动的图标。 项目列表位于可滚动的div元素中。 我在这里放了一个简单的例子： http ： //www.nerdydork.com/demos/dragscroll/

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

任何人都知道如何使用jQuery实现这一目标？

UPDATE

我越走越近了。 我在容器div的上部和下部创建了固定div。 将鼠标hover在其上时，使用http://plugins.jquery.com/project/aautoscroll启动自动滚动

现在的问题是，当我将鼠标hover在下方区域时，它会使我在字母上的拖拽变得混乱。 但这似乎只是较低的自动滚动区域的问题。

要查看我正在谈论的错误，请观看以下简短video： http ： //screencast.com/t/JBFWzhPzGfz

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

Answer 1

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

Answer 2

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

for (var i = 0; i < 10; i++) { $("#sortableContainer").append('
'); $("#droppableContainer").append('
'); }; 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(); }, })