jquery可排序滚动不定式

Question

我有问题与jquery sortable与滚动.示例 - 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允许滚动到底部而没有任何限制(滚动区域保持增加)图像可用 - http://i.stack.imgur.com/Ljd04.png

Answer 1

您可以干涉scrollTop的scrollParent关于sort事件会阻止高于scrollParent height.结果并不完美,但可能有一种方法可以改进它.

像这样:

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

        }

见小提琴:http://jsfiddle.net/zt2sd3kv/1/

JulienGré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();