Question

我想弄清楚当我拖动列表元素时如何让我的'可排序列表'滚动。

滚动在我从拖动的列表中正常工作，但在我将拖动到的列表中没有。

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

提出类似问题的另一个问题：

jQuery sortable container scroll div with overflow auto

PS。 Pivotaltracker，www.pivotaltracker.com做得很好。

Answer 1

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

可排序滚动是scrollParent的偏移量，当前滚动位置，当前项目位置和scrollSensitivity的函数。开始拖动时，sortable执行_mouseStart。这将设置scrollParent并缓存当前排序的偏移量。有了这些知识，我们可以在过度事件处理程序中进行小规模的随机播放：

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

拖动的元素更改容器时过度触发。当您点击结束事件时，占位符已移至新容器。代码获取新的scrollParent并重新获取偏移量。

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

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

Answer 2

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

如果我遗漏了任何内容，请告诉我，并且请看看我之前的回复：Automatically scroll droppable div whilst dragging

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

希望这有帮助，

<强>码

$(function() {
    var sortlists = $("#List1, #List2").sortable({
        tolerance: 'pointer',
        connectWith: '#List1, #List2',
        helper: 'original',
        scroll: true
    }).on('scroll', function() {
        sortlists.scrollTop($(this).scrollTop());
    });
});

Answer 3

您只需要将overflow: auto;添加到父元素，无论是ul还是#element，还是您拥有的内容。

Jquery UI可排序，滚动（jsFiddle示例）

3 个答案: