jquery+Sortable实现表格行拖动排序实现表格行拖动排序

使用jQuery UI的Sortable插件可以轻松实现表格行的拖动排序功能。以下是一个简单的实现示例：

HTML 部分：

<table id="sortable-table">
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>Item 2</td>
      <td>$200</td>
    </tr>
    <tr>
      <td>Item 3</td>
      <td>$300</td>
    </tr>
  </tbody>
</table>

jQuery 和 Sortable 部分：

$(function() {
  $("#sortable-table tbody").sortable({
    update: function(event, ui) {
      // 更新行顺序后的处理，例如更新数据库等
      var order = [];
      $('#sortable-table tbody tr').each(function() {
        order.push($(this).find('td').eq(0).text());
      });
      console.log(order);
    }
  });
 
  $("#sortable-table tbody").disableSelection();
});

确保在页面中引入了jQuery和jQuery UI库：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

这段代码会使得表格的<tbody>部分的行可以被拖动排序。当行排序发生变化时，update 回调函数会被触发，你可以在这个函数中实现与你的应用逻辑相关的代码，比如更新数据库等操作。