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

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

如果你计划有块的随机高度,那么这个方法可能不是最可行的,你必须找到一种通用的方法来确定偏移量何时足够高或足够低以开始滚动而不管块大小.

如果您需要任何澄清,请告诉我.

小提琴示例