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

Question

我有两个元素列表,我已经在它们两个上启用了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");
    }
});

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