jQuery UI sortable default selector?

Question

I recently came across an issue that took me a few minutes to fix that left me confused as to the default selector used by the jQuery UI items option within sortable. Consider a portlets example. I was attempting to exclude an item from sortable so instead of calling:

$( ".column" ).sortable({
    connectWith: ".column"
});

I used:

$( ".column" ).sortable({
     connectWith: ".column",
     items: ':not(.fixed)'
});

Seeing as the default behavior is to add each portlet within the columns to the sortable list I presumed that I would be able to merely exclude a class from this. I saw strange behavior however. The code above makes every child element of the portlets sortable as demonstrated here: fiddle. Obviously this is fixable using:

 $( ".column" ).sortable({
     connectWith: ".column",
     items: '.portlet:not(.fixed)'
});

I realize that :not on it's own should select all elements that do not meet selector conditions so my question is why does the default behavior only select parent elements, and why then does :not over-ride this behaviour and select the children.

Apologies if this is a simple question.

Answer 1

I think the correct selector for you must be:

 $(".column").sortable({
     connectWith: ".column",
     items: '>:not(.fixed)'
 });

the default value for the option is items: '> *', (every direct descendants of the sortable elements, http://api.jquery.com/child-selector/).

Ref: http://api.jqueryui.com/sortable/#option-items

Demo: http://jsfiddle.net/7q9jq/1/

I'm checking the code to understand why it's attaching sortable to the items matched by items option.

UPDATE

I think the issue happens because this jQuery UI function:

   _create: function() {

        var o = this.options;
        this.containerCache = {};
        this.element.addClass("ui-sortable");

        //Get the items
        this.refresh();

        //Let's determine if the items are floating
        this.floating = this.items.length ? (/left|right/).test(this.items[0].item.css('float')) : false;

        //Let's determine the parent's offset
        this.offset = this.element.offset();

        //Initialize mouse events for interaction
        this._mouseInit();

},

by calling this.refresh(); it's calling this._refreshItems(event); add specific sortable to all the matched elements of the starting selector and the additional items option, so it's wide the sortable behaviour to all the elements.