Question

Having troubles with items property of connected sortables.
What I’m trying to do is to disable items dragging using CSS selector passed (using :not option):

.sortable({
    items: ":not(.disabledItem)"
});

It works fine, however, whenever I:

1. remove ‘disabledItem’ class from item
2. drag it around (without dragging everything works fine)
3. reapply ‘disabledItem’ class

it doesnt get disabled again, even though it has ‘disabledItem’ class attached.

JsFiddle example:
http://jsfiddle.net/LZsT6/

Answer 1

Hiya here you go working demo: http://jsfiddle.net/tBKP6/1/

Feel free play around with the jsfiddle, instead of :not I have used cancel you can read further detail in the documentation. http://jqueryui.com/demos/sortable/items.html && And don’t forget to accept the answer 🙂

Specify which items are eligible to sort by passing a jQuery selector
into the items option. Items excluded from this option are not
sortable, nor are they valid targets for sortable items.

To only prevent sorting on certain items, pass a jQuery selector into
the cancel option. Cancelled items remain valid sort targets for
others.

Jquery Code

$('.list')
    .sortable({
        connectWith: ".list",
        //items: ":not(.disabledItem)"
        cancel: ".disabledItem"
    });

$('#enableItem').click(function(){
    $("#itemToDisable").removeClass('disabledItem');        
    //$("li[value='it']").removeClass('disabledItem');
});

$('#disableItem').click(function(){
    $("#itemToDisable").addClass('disabledItem');        
    //$("li[value='it']").removeClass('disabledItem');
});

​