jQuery可排序，如何防止某些项目进行排序？

Question

我有一个HTML表格，我正在使用jQuery UI sortable来对其进行排序，并且已经可以正常地拖放行以更改表格中的顺序。但是我需要阻止某些行进行排序。这些行具有class = 'nosort'且可以被选择。它们总是在底部。我正在尝试使用sortable的cancel选项来实现此目的，但没有成功。

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");
    }

;

- Jim Evans

---

我用来防止排序的事件是"beforeStop"，只需调用e.preventDefault();将其发送回去即可。 - Paolo Bergantino

@Palo - 你能提供一个例子吗？ - Jim Evans

Answer 1

我知道这是一个老问题，但由于它在我的谷歌搜索中出现，其他人也可能会看到。 .sortable() 有一个选项可以设置哪些项目是可排序的 - items。 在这种情况下：

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

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

- hgolov

---

救星！非常感谢！ - z-boss

Answer 2

就像我在评论中说的那样，当我想基于某些条件取消排序事件时，我通常使用 beforeStop 方法。例如，我有一个应用程序中的一堆列表，我想能够在它们之间进行排序，但不在它们之内进行排序，而这有时会随时更改。因此，我有以下代码：

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

- Paolo Bergantino