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允许滚动到底部而没有任何限制（滚动区域保持增加）图片可在 - 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();

Answer 2

你可以用这个小提琴作为参考。它按照您的要求工作。

http://jsfiddle.net/omegak/2bHSG/

$(".sortable").sortable({
    axis: "y",
    containment: "parent",
    cursor: "move",
    items: "li",
    tolerance: "pointer",
});
ul {
    border: 1px solid gray;
    list-style: none;
    padding: 0;
    display: inline-block;
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 190px;
    border: 1px solid black;
    float: left;
    margin: 5px;
}
li {
    background: white;
    border: 1px solid gray;
    height: 50px;
}

Answer 3

改善JulienGrégoire和 spacemanCoder 的解决方案。

我需要一种方法来防止在没有y轴约束的情况下在flexbox容器中进行水平滚动。

基本上我只将以下代码添加到sort事件处理程序

if (scrollParentEl.scrollLeft()) {
    scrollParentEl.scrollLeft(0);
}

http://jsfiddle.net/n5eL2e55/5/

Answer 4

更高版本的Sortable添加了选项scrollFn。您可以使用它来以任何方式限制自动滚动。这是一个仅允许在y轴上自动滚动的示例：

$(".sortable").sortable({
        ...
        scrollFn: function (offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl)
        {
            if (offsetY) $('#scroll_parent')[0].scrollTop += offsetY; // scroll only vertically
        },

https://github.com/SortableJS/Sortable#scrollfn-option

jquery可排序滚动不定式

4 个答案: