jQuery UI可排序:滚动整个页面以及容器

jQuery UI Sortable: Scroll entire page as well as container

本文关键字：UI 排序 滚动 jQuery      更新时间：2023-09-26

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

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

我做了一个jsFiddle演示(http://jsfiddle.net/MCcuc/)。向下滚动，并尝试将Item Q(通过盒子顶部的灰色条拖动它)从红色列表移动到绿色列表。您将看到红色列表滚动，但页面没有。我如何滚动整个页面以及列表?

我只是启用sortable没有很多选项:

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

这确实与可滚动溢出冲突。在这种情况下，可拖动的辅助元素被限制为父元素，可能是因为试图"脱离"父元素只会导致其可滚动区域的扩大。

一个解决方法是传递一个helper函数，该函数克隆被拖动的元素并将其重新放置在页面主体下。这样，可拖动的辅助元素将从一开始就位于其原始父元素的外部，因此将滚动整个页面: 
$(".sort").sortable({
    connectWith: ".sort",
    handle: ".handle",
    helper: function(event, element) {
        return element.clone().appendTo("body");
    }
});

您可以在这里找到一个更新的小提琴来演示这个

相关文章：