且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2022-01-05 22:20:48

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

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.