2

I am trying to figure out how to get my 'sortable lists' to scroll while I am dragging a list element.

The scroll works fine in the list I am dragging from but not in the list I am dragging to.

http://jsfiddle.net/jordanbaucke/pacbC/1/

Another question asking a similar thing:

jQuery sortable container scroll div with overflow auto

PS. Pivotaltracker, www.pivotaltracker.com does this well.

4

3 回答 3

7

老问题，但我今天为此挣扎了几个小时，所以我想我会分享我学到的东西。

可排序滚动是 scrollParent 的偏移量、其当前滚动位置、当前项目位置和 scrollSensitivity 的函数。当您开始拖动时，可排序对象会执行 _mouseStart。这将设置 scrollParent 并缓存其当前排序的偏移量。有了这些知识，我们可以在 over 事件处理程序中做一个小的洗牌：

over: function (event, ui) {
    ui.item.data('sortableItem').scrollParent = ui.placeholder.parent();
    ui.item.data('sortableItem').overflowOffset = ui.placeholder.parent().offset();
}

当拖动的元素更改容器时触发。当您点击 over 事件时，占位符已经移动到新容器中。代码获取新的 scrollParent 并重新缓存偏移量。

为了简洁起见，我分叉了 Tats_innit 的小提琴：http: //jsfiddle.net/3E2Hg/84/

scrollParent 在整个事件结构中的其他地方被引用，所以我不确定这是防弹的。不过，我认为这是一个很好的起点。如果我遇到任何问题，我会更新这个答案。

于 2013-11-26T21:38:46.697 回答
3

工作演示 http://jsfiddle.net/3E2Hg/1/

如果我遗漏了什么，请告诉我，并请参阅我之前的回复：Automatically scroll droppable div while dragging

行为：现在您拖动到的 div 也会滚动。（其余代码如下）

希望这可以帮助，

代码

$(function() {
    var sortlists = $("#List1, #List2").sortable({
        tolerance: 'pointer',
        connectWith: '#List1, #List2',
        helper: 'original',
        scroll: true
    }).on('scroll', function() {
        sortlists.scrollTop($(this).scrollTop());
    });
});​
于 2012-06-14T01:30:04.600 回答
0

您只需要添加overflow: auto;到父元素，无论是ul还是#element，或者你有什么。

于 2017-03-10T20:55:47.110 回答