jQuery UI Sortable：滚动整个页面以及容器

我有两个元素列表，我已经启用了jQuery UI可以对它们进行排序。 我使用connectWith选项让我在两个列表之间拖动。

一个列表中有很多元素，所以我添加了overflow-y: scroll到它，但当我尝试从该列表中抓取一个元素并将其拖动到另一个时，它只滚动列表，而不是整个页面。

我做了一个jsFiddle演示（ http://jsfiddle.net/MCcuc/ ）。 向下滚动，并尝试将Item Q （将其拖动到框顶部的灰色栏）从红色列表移动到绿色列表中。 你会看到红色列表滚动，但页面没有。 如何滚动整个页面以及列表？

我只是在没有很多选项的情况下启用sortable ：

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

Answer 1

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

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

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

你会在这里找到一个更新的小提示。