Javascript jQuery UI可排序：滚动整个页面和容器

我有两个元素列表，并且在这两个列表上都启用了jQuery UI sortable。我使用

connectWith

选项在两个列表之间拖动

一个列表中有很多元素，所以我添加了

overflow-y:scroll

，但当我试图从该列表中获取一个元素并将其拖动到另一个列表时，它只会滚动列表，而不会滚动整个页面

我制作了一个jsFiddle演示（）。向下滚动，并尝试将

项Q

（通过框顶部的灰色条将其拖动）从红色列表移动到绿色列表中。您将看到红色列表滚动，但页面没有。如何滚动整个页面和列表

我只是启用了

可排序的
，没有很多选项：

$('.sort').sortable({
    connectWith: '.sort',
    handle: '.handle'
});

这确实与可滚动溢出冲突。在这种情况下，可拖动辅助元素被约束到其父元素，可能是因为尝试“走出”父元素只会导致其可滚动区域扩大

一种解决方法是传递一个
helper
函数，该函数克隆拖动的元素并在页面主体下重新绘制它。这样，可拖动辅助元素从一开始就位于其原始父元素之外，因此将滚动整个页面：

$(".sort").sortable({
    connectWith: ".sort",
    handle: ".handle",
    helper: function(event, element) {
        return element.clone().appendTo("body");
    }
});

您将发现一个更新的小提琴来演示这一点。
我认为这与第二个列表是可滚动的有关。请注意，如果您启动并从第一个列表拖动到第二个列表中，它会按照您的需要滚动页面。很酷，这似乎很管用。不过我发现了一只奇怪的虫子。如果尝试拖动到绿色列表的末尾，它将跳回红色列表。如果你把它扔到其他任何地方，它确实会起作用。显然，这两个排序表正在竞争成为放置目标，而到辅助对象的距离看起来像是确定因素。