jQuery UI Sortable:滚动整个页面以及容器 [英] jQuery UI Sortable: Scroll entire page as well as container

问题描述

我有两个元素列表，并且我对两个元素都启用了可排序的jQuery UI.我使用connectWith选项使我能够在两个列表之间拖动.

I have two lists of elements, and I have enabled jQuery UI sortable on both of them. I used the connectWith option to enable me to drag between the two lists.

一个列表中包含很多元素，因此我向其中添加了overflow-y: scroll，但是当我尝试从该列表中获取一个元素并将其拖动到另一个列表时，它只会滚动列表，而不是整个页面

One list has a lot of elements in it, so I added overflow-y: scroll to it, but when I try to grab an element from that list and drag it to the other, it only scrolls the list, not the entire page.

我制作了一个jsFiddle演示( http://jsfiddle.net/MCcuc/).向下滚动，然后尝试将Item Q(通过框顶部的灰色栏拖动它)从红色列表移至绿色列表.您会看到红色列表滚动，但页面却没有.如何滚动整个页面和列表?

I made a jsFiddle demo (http://jsfiddle.net/MCcuc/). Scroll down, and try to move Item Q (drag it by the gray bar on top of the box) from the red list into the green list. You'll see the red list scrolls, but the page does not. How can I scroll the whole page as well as the list?

我只是启用sortable，而没有太多选择:

I'm just enabling sortable without many options:

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

推荐答案

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

That's indeed a conflict with scrollable overflow. The draggable helper element is constrained to its parent in that case, probably because trying to "get outside" the parent only results in enlarging its scrollable region.

一种解决方法是传递一个helper函数，该函数将克隆被拖动的元素并在页面正文下为其父项.这样，可拖动的辅助元素将从一开始就位于其原始父元素之外，因此将滚动整个页面:

A workaround is to pass a helper function that clones the dragged element and reparents it under the page body. This way, the draggable helper element will be outside of its original parent from the start, and therefore will scroll the entire page:

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

您将在此处找到更新的小提琴.

You will find an updated fiddle demonstrating this here.

这篇关于jQuery UI Sortable:滚动整个页面以及容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！