Все элементы в первом списке могут быть отсортированы, но только некоторые элементы должны быть заменены на второй список

Question

Я загружаю 2 списка динамически, и я хочу, чтобы все элементы в первом списке были полностью сортируемыми, но только некоторые элементы с определенным классом могут быть заменены на второй список.

Я пытался ограничить элементы класса с нестабильным доступом для перехода ко второму списку, но, похоже, это не сработало, поскольку элементам с этим классом не разрешено перемещаться в первом списке. Любая помощь будет высоко ценится.

    $(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();
    });