在到达边框时滚动可排序/可拖动项目父容器

Question

我有一个庞大的项目列表，可以通过拖动它们进行排序。我注意到，一旦列表变得非常长并且溢出其父容器的高度，将项目拖动到当前不可见的位置会非常不方便。

这是example (jsFiddle)。

我想将第一个元素拖到一个手势中的最后一个元素之前。目前这是不可能的，因为我无法同时拖动和滚动。是否有一个设置，只要我将其中一个子项拖到容器的边框附近，就可以自动滚动容器？

我为appendTo和containment尝试了不同的设置，但没有设置产生预期效果。

已更新解决方案

感谢下面@Shannon的回答，我能够让它工作，你可以找到更新的解决方案here。

Answer 1

一旦用户拖动滚动的一半，您就必须创建一个滚动事件。这很简单。

$(li).drag(function(e) {
    $("ul").scrollTop(function(i, v) {
        var h = $(ul).height();
        var y = e.clientY - h / 2;
        return v + y * 0.1;
    });
});

这不行，但这是一个开始，所以你可以知道你将如何接近它，我今天早上没有时间完全完成它！