Question

I want a row in a jQuery UI Sortable to be sortable only if it has a cansort class. I have it set to cancel: ':not(.cansort)' but it refuses to let me sort anything at all, including the rows that have the cansort class.

I know I can add a disabled class explicitly, but I use the cansort class for other purposes, so that means each time I made something sortable I would have to remove the disabled class and add the cansort class. I don’t want to have to add and remove a class each time I toggle something to be sortable.

I don’t want to restrict what’s sortable in the items property because every element can be sortable and I only dynamically toggle it on and off using the cansort class.

Answer 1

The reason for this is the way that the cancel option is processed by the ui.mouse widget (a widget used by several jQueryUI widgets to handle mouse events). Check out this line of code:

elIsCancel = (typeof this.options.cancel == "string" 
    && event.target.nodeName ? 
        $(event.target).closest(this.options.cancel).length : false);

What this means is that your selector gets run with the closest on the element that was mousedowned on. So lets take an li.cansort sortable item. That will generate a jQuery selector that looks something like this:

$("li.cansort").closest(":not(.cansort)").length;

This will always return a length of 1, because the parent ul for all the sortable lis does not have the .cansort class. This means with that kind of selector, the sorting will always be canceled.

Luckily, this is easy to get around if you just include the tag name in your cancel selector:

cancel: "li:not(.cansort)"

Here’s an example: http://jsfiddle.net/7hSnc/ (try removing the li from the cancel selector)