Question

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

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 sortable：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();
        }
    }
});

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

2 个答案: