第一个列表中的所有元素都是可排序的，但只有某些元素可以与第二个列表交换

Question

我正在动态加载 2 个列表，我希望第一个列表中的所有元素都可以完全排序，但只有具有特定 class 的某些元素可以与第二个列表交换.

我试图限制 class 无法排序的元素转到第二个列表，但这似乎不起作用，因为不允许 class 的元素在其中移动第一个列表。任何帮助将不胜感激。

    $(function () {

        $('#visibleElements').sortable({
            connectWith: '.connectedSortable',
            opacity: 0.8,
            placeholder: 'customPlaceholder',
            forcePlaceholderSize:true,
            start: function(e, ui){
                ui.placeholder.height(ui.item.height());
            },
            receive: function (event, ui) {
                if (ui.item.hasClass("subject")) {
                    ui.item.removeClass('red');
                    ui.item.find("span.square").removeClass('redSquare');
                    ui.item.addClass('blue');
                    ui.item.find("span.square").addClass('darkBlueSquare');
                }
            },
            stop: function(ev, ui) {
                if (ui.item.hasClass("unsortable")) {
                    $(this).sortable("cancel");
                }
            }
        });

        $('#inactiveElements').sortable({
            connectWith: '.connectedSortable',
            opacity: 0.8,
            placeholder: 'customPlaceholder',
            forcePlaceholderSize:true,
            start: function (e, ui) {
                ui.placeholder.height(ui.item.height());
            },
            receive: function (event, ui) {
                if (ui.item.hasClass("subject")) {
                    ui.item.removeClass('blue');
                    ui.item.find("span.square").removeClass('darkBlueSquare');
                    ui.item.addClass('red');
                    ui.item.find("span.square").addClass('redSquare');
                }
            },
        }).disableSelection();
    });

Answer 1

最后我能够通过从第一个列表中删除 Stop 事件并将函数包含在 Receive 事件中来解决这个问题在第二个列表中：

$(function () {

        $('#inactiveElements').sortable({
            connectWith: '.connectedSortable',
            opacity: 0.8,
            placeholder: 'customPlaceholder',
            forcePlaceholderSize:true,
            start: function (e, ui) {
                ui.placeholder.height(ui.item.height());
            },
            receive: function (event, ui) {
                if (ui.item.hasClass("subject")) {
                    ui.item.removeClass('blue');
                    ui.item.find("span.square").removeClass('darkBlueSquare');
                    ui.item.addClass('red');
                    ui.item.find("span.square").addClass('redSquare');
                }
                if (!ui.item.hasClass("subject")) {
                    ui.sender.sortable("cancel");
                }
            },
        }).disableSelection();
    });

第一个列表中的所有元素都是可排序的，但只有某些元素可以与第二个列表交换

All elements within first list are sortable but only certain elements should be exchangeable with the second list

jquery

jquery-ui-sortable