到达其边界时滚动可排序/可拖动项目的父容器 [英] Scrolling a sortable/dragable item's parent container when its border is reached

问题描述

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

I have a huge list of items that can be sorted by dragging them. I noticed that once the list gets very long and overflows its parent container's height, dragging an item to a position not currently visible gets very inconvenient.

这是一个示例(jsFiddle).

我想以一个手势将第一个元素拖到最后一个元素的右边.目前这是不可能的，因为我不能同时拖动和滚动.是否有一项设置可让我将容器中的一个子容器拖到容器的边界附近时自动滚动容器?

I want to drag the first element to right before the last element in one gesture. Currently that's not possible because I can't drag and scroll at the same time. Is there a setting that enables auto-scrolling the container as soon as I drag one of its children near the border of the container?

我为appendTo和containment尝试了不同的设置，但是没有设置具有理想的效果.

I have tried different settings for appendTo as well as containment, but no setting had the desired effect.

感谢下面@Shannon的回答，我能够使其正常运行，您可以找到更新的解决方案这里.

Thanks to the answer by @Shannon below, I was able to get it working, you can find the updated solution here.

推荐答案

一旦用户拖动滚动条的一半，就必须创建滚动事件.很简单

You'll have to create a scroll event once the user drags past half way of the scroll. It's pretty simple.

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

这是行不通的，但这只是一个开始，因此您可以了解如何使用它，我只是今天早上没有时间完全完成它！

This wont work, but it's a start so you can get an idea how you'll have to approach it, I just didn't have the time this morning to fully finish it!

这篇关于到达其边界时滚动可排序/可拖动项目的父容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！