Question

我有一个可排序的表格行，每个data-order顺序的td属性为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();

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

1 个答案:

Working Demo