jQuery可排序阻止某些项目排序？

Question

我有一个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");
    }

;

Answer 1

我知道这是一个老问题,但是由于它出现在我的谷歌搜索中,其他人看到了这一点..sortable()可以选择设置哪些项目是可排序的 - 项目.在这种情况下:

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

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

Answer 2

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

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