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");
    }
});

你会发现一个更新的小提示，展示了这个here。

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

1 个答案: