jQuery UI 可排序的默认选择器？

Question

我最近遇到了一个问题，我花了几分钟来解决这个问题，这让我对 sortable 中的 jQuery UI 项目选项使用的默认选择器感到困惑。考虑一个 portlet 示例。我试图从可排序中排除一个项目，而不是调用：

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

我用过：

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

默认行为是将列中的每个 portlet 添加到可排序列表中，我假设我只能从中排除一个类。然而，我看到了奇怪的行为。上面的代码使 portlet 的每个子元素都可以排序，如下所示：fiddle。显然，这可以通过以下方式解决：

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

我意识到 :not 自己应该选择所有不满足选择器条件的元素，所以我的问题是为什么默认行为只选择父元素，为什么 :not 会覆盖此行为并选择子元素.

抱歉，如果这是一个简单的问题。

Answer 1

我认为适合您的选择器必须是：

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

该选项的默认值为items: '> *',（可排序元素的每个直接后代，http://api.jquery.com/child-selector/）。

参考：http://api.jqueryui.com/sortable/#option-items

演示：http://jsfiddle.net/7q9jq/1/

我正在检查代码以了解为什么它将可排序附加到items 选项匹配的项目。

更新

我认为问题的发生是因为这个 jQuery UI 函数：

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

},

通过调用this.refresh();，它调用this._refreshItems(event); 为起始选择器的所有匹配元素和附加的items 选项添加特定的可排序，因此所有元素的可排序行为都很广泛。