使用sortablejs实现element表格的拖拽功能

使用SortableJS实现Element表格的拖拽功能，你需要先引入SortableJS库。以下是一个简单的示例代码：

HTML部分：

<table id="table">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Data 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Data 2</td>
    </tr>
    <!-- More rows... -->
  </tbody>
</table>

JavaScript部分：

// 确保在DOM元素加载完毕后执行
document.addEventListener('DOMContentLoaded', function () {
  var el = document.getElementById('table'); // 获取表格元素
  var sortable = new Sortable(el.querySelectorAll('tbody'), { // 创建Sortable实例
    animation: 150, // 动画持续时间
    onEnd: function (evt) {
      // 拖拽结束后的回调函数
      var item = evt.item; // 被拖拽的元素
      var from = evt.from; // 拖拽开始的列表
      var to = evt.to; // 拖拽结束的列表
      console.log('Moved from ' + from.index + ' to ' + to.index);
      // 在这里可以添加更新数据状态的代码
    }
  });
});

确保在你的项目中引入了SortableJS库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>

以上代码会使得<tbody>内的行可以拖拽，在拖拽结束时，你可以在onEnd回调函数中处理更新数据状态的逻辑。