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

Question

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

目前，我有两个可滚动的可排序级别（请参阅jsFiddle）；

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

在第二层，我有：

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

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

有没有一种方法可以同时保持两种可滚动性而不牺牲另一种？

Answer 1

更新

我修改了 on scroll 函数，使其表现得更像传统滚动（在我拥有它之前，任何时候你向上或向下移动它都会尝试滚动）。它还主要用于与给定示例一起使用，而不是与更广泛的盒子尺寸等一起使用。

现在我尝试仅在您拖动的框到达滚动条的顶部或底部时让它向上或向下滚动。唯一棘手的部分是取决于您拖动的框的大小，您希望开始滚动的框的偏移量因大小而异。

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

另一个使这更容易的想法是，如果您知道在这种情况下可拖动的框的所有可能大小。您可以设置一个对象，并引用链接到各个值的所有框大小，您可以使用这些值在滚动开始时针对该特定大小的框进行修改。 如果这对你来说可行，我可以告诉你我会怎么做。

但这是一个更新的例子，你的最新小提琴具有不同的块高度。我对代码进行了一些处理，以便无论 （您指定的那些）块的大小，滚动都将在同一时间开始。

$('.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);
        }  
    });

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

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

Fiddle Example