jquery可排序滚动不定式

Question

我在使用 jquery 滚动排序时遇到问题。 示例可在 - http://jsfiddle.net/n5eL2e55/1/

我的代码: HTML:

<ul class="list">
    <li class="item">item 1</li>
    <li class="item">item 2</li>
    <li class="item">item 3</li>
    <li class="item">item 4</li>
    <li class="item">item 5</li>  
    <li class="item">item 6</li>
    <li class="item">item 7</li>    
</ul>

Javascript:

$(function() {
    $(".list").sortable({
        items: ".item",
        axis : "y",
        helper:'clone',
        containment: "parent",
        scroll: true
    }).disableSelection();
    $(".list").disableSelection();
});

CSS:

.list{
    overflow: scroll;
    border:1px solid red;
    height: 200px;
    width: 150px;
    position: relative;
    padding: 0;
}
.item{
    height: 50px;
    width: 100%;
    list-style-type: none;
    border: 1px solid #000;
}

问题是当您将项目从上到下拖动最后一个项目时，您会不断滚动到底部。问题是 jquery sortable 允许滚动到底部没有任何限制(滚动区域不断增加) 图片位于 - /image/Ljd04.png

Answer 1

您可以在 sort 事件上干扰 scrollParent 的 scrollTop，以防止其高于 scrollParent 高度。结果并不完美，但可能有改进的方法。

像这样:

sort: function (e, ui) {
            var scrollParent = $(e.target).sortable('instance').scrollParent;
            if( scrollParent.scrollTop()>scrollParent.height()){
               scrollParent.scrollTop(scrollParent.height())
            }

        }

参见 fiddle :http://jsfiddle.net/zt2sd3kv/1/

<小时/>

Julien Grégoire 提供的解决方案的更新版本

我在启动时添加了最大scrollTop的计算，并在scrollTop增加此存储值时恢复 - http://jsfiddle.net/n5eL2e55/2/

$(".list").sortable({
    items: ".item",
    axis : "y",
    helper:'clone',
    containment: "parent",
    scroll: true,
    start: function(e, ui) {
        //set max scrollTop for sortable scrolling
        var scrollParent = $(this).data("ui-sortable").scrollParent;
        var maxScrollTop = scrollParent[0].scrollHeight - scrollParent.height() - ui.helper.height();
        $(this).data('maxScrollTop', maxScrollTop);
    },
    sort: function (e, ui) {
        //check if scrolling is out of boundaries
        var scrollParent = $(this).data("ui-sortable").scrollParent,
            maxScrollTop = $(this).data('maxScrollTop');
        if(scrollParent.scrollTop() > maxScrollTop){
            scrollParent.scrollTop(maxScrollTop);
        }
    },
}).disableSelection();