jquery - 将项目从可滚动/可排序拖动到屏幕外的另一个时，如何让屏幕滚动？

Question

我正在尝试实现类似 Trello 的功能，用于将项目从一个列表(阶段)拖动到另一个列表(阶段)。当列表/阶段太多时，我希望屏幕在从最左边的列表拖动到最右边的列表时自动滚动，这可能是“屏幕外”。

目前，我有两个级别的可排序对象，它们都是可滚动的(请参阅 jsFiddle )；

第一级水平滚动，第二级垂直滚动。也就是说，我可以水平移动列表，而列表中的每个元素只能垂直移动。

在第二层，我有:

$('.phase-block').sortable({
    scroll: true,
    connectWith: '.phase-block',
    appendTo: '.phase-scroll',
    helper: 'clone'
});

它将帮助器放入容器中，并允许我将其拖动到最右侧的列表上，但不允许在列表中垂直滚动。

有没有一种方法可以保持两种滚动性而不牺牲其中一种滚动性？

Answer 1

更新

我修改了 on scroll 函数，使其表现得更像传统的滚动(在我使用它之前，只要你向上或向下移动，它就会尝试滚动).它主要也是为了与给定的示例一起工作而构建的，而不是与更广泛的盒子尺寸等一起工作。

现在，我尝试仅当您拖动的框到达滚动条的顶部或底部时才使其向上或向下滚动。唯一棘手的部分是取决于您拖动的框的大小，您想要开始滚动的框的偏移量根据大小而不同。

我确信有一种方法可以确定您拖动的框何时超过滚动框底部/顶部下方或上方的一半，然后相应地滚动，但解决方案不是我能够做到的此时想出。

另一个可以让这变得更容易的想法是，如果您知道通过此场景可拖动的框的所有可能大小。您可以设置一个对象，该对象引用链接到各个值的所有框大小，您可以使用这些值在滚动开始时针对该特定大小的框进行修改。 如果这对您来说可行，我可以向您展示我会如何做。

但是这是一个更新的示例，其中包含您最新的 fiddle ，它具有不同的 block 高度。我对代码进行了一些处理，以便无论 block 的大小(您指定的 block 的大小)如何，滚动都会大约在同一时间开始。

$('.phase-block').sortable({
        scroll: true,
        connectWith: '.phase-block',
        appendTo: '.phase-scroll',
        helper: 'clone',
        sort: function(event, ui){
            if(ui.offset.top >= activePhaseBlock.height()+(90 -ui.item.height() > 0 ? 65-ui.item.height() : 10))
                activePhaseBlock.scrollTop(activePhaseBlock.scrollTop()+ui.item.height());     
            else if(ui.offset.top <= 0+(ui.item.height() > 25 ? 20 : 40))
                activePhaseBlock.scrollTop(activePhaseBlock.scrollTop()-ui.item.height());
        },
        over: function(event, ui){
            activePhaseBlock = $(this);
        }  
    });

如果您计划使用随机的 block 高度，那么此方法可能不是最可行的，您必须找到一种通用的方法来确定偏移量何时足够高或足够低以开始滚动，无论 block 大小。

如果您需要任何说明，请告诉我。

Fiddle Example