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

43
January 08, 2019, at 01:20 AM

I'm loading 2 lists dynamically and I want to be able to have all the elements in the first list to be completely sortable but only certain elements with a specific class can be exchangeable with the second list.

I tried to restrain the elements with the class unsortable to go to the second list but this doesn't seem to work since the elements that have that class are not allowed to move within the first list. Any help would be much appreciated.

    $(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

Finally I was able to work it out by removing the Stop event from the first list and including the function inside the Receive event on the second list:

$(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();
    });   
READ ALSO
Remove an array item nested inside of an object

Remove an array item nested inside of an object

I'm trying to remove a specific item from an objects array based on the title attribute in the arrayI keep running into a problem where I can view the array item, but I'm not able to splice the item out of the array based on the parameters entered in my remove...

19
“Uncaught TypeError: this._socket.write is not a function” on client.connect

“Uncaught TypeError: this._socket.write is not a function” on client.connect

I am trying to create a OPCUA Client in nwjs with the node-opcua package

44
Why this code isnot working , i trying to add condition into condition using if statment and check class name [on hold]

Why this code isnot working , i trying to add condition into condition using if statment and check class name [on hold]

this the code that i wrote and this don't fire if statements correctly and i don't regognize the error where when it fire it do nothing what should i do ??

35