jQuery sortable 阻止某些项目排序？答案

【问题标题】：jQuery sortable prevent some items from sorting?jQuery sortable 阻止某些项目排序？
【发布时间】：2014-02-15 19:46:39
【问题描述】：

我有一个 HTML 表格，我正在使用 jQuery UI 进行排序，它工作得很好，允许我在表格中拖放行顺序。我需要防止某些行被排序。这些行有一个 class='nosort' 并且可以被选中。他们总是在底部。我正在尝试使用 sortable 的取消选项来完成此操作，但没有成功。

HTML：

    <table id='sort'>
    <thead>
        <tr>
            <td>Col 1</td>
            <td>Col 2</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class='index'>Original Row 1</td>
            <td>Some Stuff</td>
        </tr>
        <tr>
            <td class='index'>Original Row 2</td>
            <td>Some Stuff</td>
        </tr>
        <tr>
            <td class='index'>Original Row 3</td>
            <td>Some Stuff</td>
        </tr>
        <tr class='nosort'>
            <td class='index'>Original Row 4</td>
            <td>Some Stuff</td>
        </tr>
        <tr class='nosort'>
            <td class='index'>Original Row 5</td>
            <td>Some Stuff</td>
        </tr>
    </tbody>
</table>

代码：

$("#sort tbody").sortable({
    helper: fixHelperModified,
    stop: updateIndex
}).disableSelection()

var fixHelperModified = function (e, tr) {    
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function (index) {
        $(this).width($originals.eq(index).width())
    });
    return $helper;
},
    updateIndex = function (e, ui) {        
        $("#dvQMsg").hide();
        $("#dvQErr").hide();
        $("#dvSaveOrder").show();
        $('td.index', ui.item.parent()).each(function (i) {
            $(this).html(i + 1);
        });
        $(".nosort").sortable("cancel");
    }

;

【问题讨论】：

我用来防止排序的事件是“beforeStop”，只需调用 e.preventDefault();把它寄回去。
@Palo - 你能举个例子吗？

标签： jquery html jquery-ui html-table

【解决方案1】：

我知道这是一个老问题，但自从它出现在我的 Google 搜索中后，其他许多人都看到了这个。 .sortable() 有一个选项来设置哪些项目是可排序的 - 项目。在这种情况下：

$( "#sort" ).sortable({
  items: "tr:not(.nosort)"
});

jQuery 可排序：https://jqueryui.com/sortable/#items

【讨论】：

救世主！非常感谢！

【解决方案2】：

就像我在评论中所说，当我想根据某些标准取消排序事件时，我通常使用beforeStop 方法。例如，我在一个应用程序中有一堆列表，我希望能够在它们之间进行排序，但不能在它们之间进行排序，这有时会即时更改。所以我有一些看起来像这样的东西：

$('#some_list').sortable({
    ...,
    beforeStop: function(e, ui) {
        if($(ui.item).closest('ul')[0] === this) { // don't allow within this
            e.preventDefault();
        }
    }
});

【讨论】：