Question

我试图实现类似Trello的功能，将项目从一个列表（阶段）拖动到另一个列表。当列表/阶段太多时，我希望屏幕在从最左边的列表拖动到最右边的列表时自动滚动，这可能是＆＃34;关闭屏幕＆＃34;。

目前，我有两个可滚动的可排序级别（请参阅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

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

1 个答案: