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

原文 标签 jquery jquery-ui drag-and-drop jquery-ui-draggable jquery-ui-sortable

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

目前,我有两个可滚动级别的可排序对象(请参阅 jsFiddle );

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

在第二层,我有:

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

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

有没有办法在不牺牲另一种的情况下保持两种滚动性?

最佳答案

更新

我修改了 scroll功能,以便它的行为更像传统的滚动(在我拥有它之前,任何时候向上或向下移动它都会尝试滚动)。它也主要是为了与给定的例子一起工作,而不是与更广泛的盒子尺寸等一起工作。

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

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

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

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

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

关于jquery - 将项目从可滚动/可排序的项目拖到屏幕外的另一个项目时,如何让屏幕滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27576621/

相关文章:

javascript - 禁用selectlsit项目无法正常工作

javascript - Jcarousel突出显示第一张可见照片

javascript - 图像点击工具提示

Java 多个拖放面板不起作用

javascript - jquery 性能 - 页面滞后于清除 .html 内容

javascript - 使用jQuery刷新标签:text()或replaceWith()

javascript - 让一个主干.js View 知道 jQuery 可排序中的更新

javascript - Javascript Canvas 中最干净的拖放代码

javascript - 如何使用react.js从列表拖放到树

javascript - Touchstart 事件委托(delegate)