jQuery：如何在使用 sortable 删除后保留元素上的属性值

Question

我有一个 sortable table 行，在每个 td 顺序中有一个 data-order 属性，按 1 到 4 排序。我想保留它的值即使排序后也可以排序。示例：如果 <td data-order="2"> 将被放在最后一个，那么它的属性的新值将为 4。

$("tbody").sortable().disableSelection();

table{
    border-collapse:collapse;
}
td{
    padding:10px;
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<table border="1">
    <tbody>
        <tr>
            <td data-order="1">test1</td>
        </tr>
        <tr>
            <td data-order="2">test2</td>
        </tr>
        <tr>
            <td data-order="3">test3</td>
        </tr>
        <tr>
            <td data-order="4">test4</td>
        </tr>
    </tbody>
</table>

Answer 1

您可以使用可排序插件的事件update()。当用户停止排序并且 DOM 位置发生变化时触发此事件。

 $( "tbody" ).sortable({
  update: function( event, ui ) {
       $( "tbody td" ).each(function(i){
         $(this).data("order",i+1);
         $(this).attr("data-order",i+1);
       })
    }
 }).disableSelection();

Working Demo