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

Question

我有两个元素列表，并在它们两个上启用了jQuery UI可排序。 我使用了connectWith选项来使我可以在两个列表之间拖动。

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

我制作了一个jsFiddle演示(http://jsfiddle.net/MCcuc/)。 滚动页面并尝试将红色列表中的Item Q(通过顶部的灰色条拖动)移动到绿色列表中。 你会发现红色列表滚动了，但页面没有跟着滚动。如何同时滚动整个页面和列表?

我仅启用了不多的sortable选项:

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

- gen_Eric

---

我认为这与第二个列表可滚动有关。请注意，如果您从第一个列表开始并拖到第二个列表，则会像您想要的那样滚动页面。 - Merlyn Morgan-Graham

Answer 1

这确实是与可滚动溢出冲突的问题。在这种情况下，可拖动的帮助元素被限制在其父元素中，可能是因为试图“超出”父级只会导致其可滚动区域扩大。

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

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

你可以在这里找到一个更新的演示版。

- Frédéric Hamidi

---

很棒，这似乎有效。但我发现了一个奇怪的错误。如果你试图拖动到绿色列表的末尾，它会跳回红色列表。如果你在其他地方放下它，它就可以正常工作。 - gen_Eric

看起来是这两个可排序元素在竞争成为拖放目标，而助手与目标的距离似乎是决定因素。 - Frédéric Hamidi