js实现table表格拖拽排序

实现表格拖拽排序可以使用HTML5的Drag and Drop API，下面是一个使用纯JavaScript实现的示例代码：

<table id="myTable">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
      <td>Row 1, Column 3</td>
    </tr>
    <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
    </tr>
    <tr>
      <td>Row 3, Column 1</td>
      <td>Row 3, Column 2</td>
      <td>Row 3, Column 3</td>
    </tr>
  </tbody>
</table>

// 获取表格和表格行
var myTable = document.getElementById("myTable");
var rows = myTable.getElementsByTagName("tr");

// 遍历表格行，为每一行添加拖拽事件
for (var i = 0; i < rows.length; i++) {
  var row = rows[i];
  
  // 设置draggable属性为true
  row.draggable = true;
  
  // 添加dragstart事件
  row.addEventListener("dragstart", function(event) {
    // 设置拖拽的数据，这里使用了text/plain格式
    event.dataTransfer.setData("text/plain", event.target.innerHTML);
  });
  
  // 添加dragover事件
  row.addEventListener("dragover", function(event) {
    // 阻止默认的drop事件
    event.preventDefault();
    
    // 添加drop效果
    event.dataTransfer.dropEffect = "move";
  });
  
  // 添加drop事件
  row.addEventListener("drop", function(event) {
    // 阻止默认的drop事件
    event.preventDefault();
    
    // 获取拖拽的数据
    var data = event.dataTransfer.getData("text/plain");
    
    // 将数据插入到当前行之前
    this.parentNode.insertBefore(document.createElement("tr"), this).innerHTML = data;
    
    // 删除原来的行
    event.target.remove();
  });
}

在上面的代码中，我们首先获取了表格和表格行，然后遍历每一行，为每一行添加拖拽事件。在dragstart事件中，我们设置了拖拽的数据，这里使用了text/plain格式；在dragover事件中，我们阻止了默认的drop事件，并添加了drop效果；在drop事件中，我们获取了拖拽的数据，并将数据插入到当前行之前，然后删除原来的行。这样就实现了表格的拖拽排序。