Question

我使用jQuery sortable来排序我的表。看我的结构

<table id="sortable">
    <tr class="not">
        <td>Elements</td>
    </tr>
    <tr>
        <td>I am first</td>
    </tr>
    <tr>
        <td>I am second</td>
    </tr>
    <tr>
        <td>I am third</td>
    </tr>
</table>

我的jquery是

<script>
jQuery('#sortable tbody').sortable({
    update: function (event, ui) {  },
    cancel: '.not',
});
</script>

我可以在这里移动

    <tr>
    <td>I am first</td>
</tr>
<tr>
    <td>I am second</td>
</tr>
<tr>
    <td>I am third</td>
</tr>

之前的行

<tr class="not"><td>Elements</td></tr>

如何阻止这种运动？

Answer 1

如果您只想阻止第一个元素，如果它是表格的标题，请添加<thead>标记

参见示例

<table id="sortable">
      <thead>
            <tr class="not"><td>Elements</td></tr>
      </thead>
      <tbody>
            <tr><td>I am first</td></tr>
            <tr><td>I am second</td></tr>
            <tr><td>I am third</td></tr>
      </tbody>
</table>

<script>
jQuery('#sortable tbody').sortable({
    update: function (event, ui) {  }        
});
</script>

请参阅演示：http://jsfiddle.net/arunkumarthekkoot/7hhza/

Answer 2

您可以尝试比较offset.top函数中.not和sortable元素的sort or stop值。根据比较结果，您可以取消/允许排序：

JS代码：

jQuery('#sortable tbody').sortable({
        update: function (event, ui) {},
        cancel: '.not',
        stop: function (event, ui) {
            var p = $('.not').offset().top;
            var P = ui.position.top;
            if (P < p) {                
                return false;
            }
        }
    });

HTML：

<table id="sortable">
    <tr>
        <td>Elements</td>
    </tr>
    <tr>
        <td>I am first</td>
    </tr>
    <tr class="not">
        <td>I am second</td>
    </tr>
    <tr>
        <td>I am third</td>
    </tr>
</table>

演示：http://jsfiddle.net/lotusgodkk/GCu2D/155/

Answer 3

您可以使用 item option 排除特定项目。像这样：

jQuery('#sortable tbody').sortable({
   items: 'tr:not(.not)'
});

如何在jquery中排除tr的移动？

3 个答案: