Jquery UI Sortable，Scrolling（jsFiddle示例）

我想弄清楚如何让我的'可排序列表'滚动，而我拖动列表元素。Jquery UI Sortable，Scrolling（jsFiddle示例）

滚动在我从但不是在我拖着到拖动列表列表中工作正常。

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

另一个问题问类似的事情：

jQuery sortable container scroll div with overflow auto

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

来源

2012-06-14 jordan.baucke

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

请让我知道如果我错过了什么，和SLO看我以前的解决这个答复：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()); 
    }); 
});

来源

2012-06-14 01:30:04

将项目1和3放置在第二个滚动框中。然后，将两个滚动条都设置为高。现在，您无法将第2项从第一个滚动框拖放到第二个滚动框的8/9之间，因为滚动条高度不同。也许解决方法是将滚动框1中的临时设置高度设置为滚动框2的长度以上。 – arttronics

Hiya @arttronics howz it going？ :)是因为'on'甚至绑定到'this'对象，即当列表变得不相等时，用户拖动的div可以是：将其拖动到div，然后将其滚动到底部或可能使用'this'对象来玩，并且始终选择较大的容器作为滚动引用，尽管为评论欢呼。 –

这太糟糕了，它是一个非工作演示报告在其他[** SO答案**]（http://stackoverflow.com/questions/10986159/automatically-scroll-droppable-div-whilst-dragging/10986522# 10986522）你昨天提供了很多用户。 ** - 1 **为无用的答案。 – arttronics

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

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

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-26 21:38:46 Rakuen42

我爱你。这是一个非常干净的解决方案，可能非常棘手的问题。我还没有遇到任何问题，它对我来说是开箱即用的！如果我发现任何奇怪的事情将更新。 –

美丽的解决方案 - 节省了我的工作时间，谢谢！ – tedwards947

@ tedwards1988太棒了，很高兴它可以帮助！ – Rakuen42

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

来源

2017-03-10 20:55:47

Jquery UI Sortable，Scrolling（jsFiddle示例）

回答

相关问题