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

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

1 个答案: