jQueryUI可排序刷新失败

jQueryUI Sortable Refresh Fail

本文关键字：失败 刷新 排序 jQueryUI      更新时间：2023-09-26

我想为两个可排序列表编写jQuery/JavaScript代码，具有以下限制:

  • List1只接受List2，反之亦然。
  • 项目只能从顶部拖动。

  • 物品只能添加到顶部。

    我尝试了几个不同版本的jQuery和jQueryUI，但我似乎无法实现这一点。这是我目前的记录:

HTML: 

<ul class='sortList' id="list1">
    <li class="ui-state-default">abc1</li>
    <li class="ui-state-default">def1</li>
    <li class="ui-state-default">ghi1</li>
    <li class="ui-state-default">jkl1</li>
    <li class="ui-state-default">mno1</li>
</ul>
<ul class='sortList' id="list2">
    <li class="ui-state-default">abc2</li>
    <li class="ui-state-default">def2</li>
    <li class="ui-state-default">ghi2</li>
    <li class="ui-state-default">jkl2</li>
    <li class="ui-state-default">mno2</li>
</ul>
JavaScript: 

$(function() {
    var blockSort = true;
    $("#list1").sortable({
        connectWith: "#list2",
        items: "> li:first",
        start: function(event, ui) {
            ui.placeholder.height(ui.item.height());
        },
        receive: function(event, ui) {
            blockSort = false;
            $('#list1').find('li:eq(0)').before(ui.item);
        },
        stop: function(event, ui) {
            if (blockSort) {
                event.preventDefault();
            }
            blockSort = true;
        }
    }).disableSelection();
    $("#list2").sortable({
        connectWith: "#list1",
        items: "> li:first",
        start: function(event, ui) {
            ui.placeholder.height(ui.item.height());
        },
        receive: function(event, ui) {
            blockSort = false;
            $('#list2').find('li:eq(0)').before(ui.item);
        },
        stop: function(event, ui) {
            if (blockSort) {
                event.preventDefault();
            }
            blockSort = true;
        }
    }).disableSelection();
});
CSS: 

.sortList { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 150px;
}
.sortList li { display: inline-block; margin: 5px; padding: 5px; font-size: 1.2em; width: 120px;
}
.ui-sortable-placeholder {
    border: 1px dotted black;
    background: rgba(99,99,99,0.05);
    visibility: visible !important;
}
.ui-sortable-placeholder * {
    visibility: hidden;
}

JSFiddle例子

问题是，一旦一个列表项成为可排序的活动，当更多的项目被添加到顶部时，它不会被禁用。我认为这将自行发生，不再需要显式刷新。但我也试过刷新，也没有工作。

这应该如何正确实现?

这可能是一个bug。

但是作为一种解决方案，您可以销毁可排序的，并在接收事件中使用缓存选项重新初始化它，如下所示:

receive: function(event, ui) {
        blockSort = false;
        $('#list1').find('li:eq(0)').before(ui.item);
        var options = $("#list1").sortable('option')
        $("#list1").sortable('destroy').sortable(options);
    },

JSfiddle

相关文章：