js table表格拖拽排序

以下是一个简单的示例，可以实现在表格中拖拽行进行排序：

HTML代码：

<table id="myTable">
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>商品1</td>
      <td>100</td>
    </tr>
    <tr>
      <td>商品2</td>
      <td>200</td>
    </tr>
    <tr>
      <td>商品3</td>
      <td>150</td>
    </tr>
  </tbody>
</table>

JavaScript代码：

// 获取表格元素
var table = document.getElementById("myTable");

// 获取表格中的tbody元素
var tbody = table.getElementsByTagName("tbody")[0];

// 获取tbody中的所有行
var rows = tbody.getElementsByTagName("tr");

// 给每一行绑定拖拽事件
for (var i = 0; i < rows.length; i++) {
  rows[i].draggable = true;
  rows[i].addEventListener("dragstart", function(e) {
    // 设置拖拽数据
    e.dataTransfer.setData("Text", e.target.id);
  });
  rows[i].addEventListener("dragover", function(e) {
    // 阻止默认事件
    e.preventDefault();
  });
  rows[i].addEventListener("drop", function(e) {
    // 阻止默认事件
    e.preventDefault();
    // 获取拖拽数据
    var data = e.dataTransfer.getData("Text");
    // 如果拖拽目标不是自己，则交换位置
    if (e.target.tagName == "TR" && e.target.id != data) {
      var target = e.target.parentNode;
      var source = document.getElementById(data).parentNode;
      target.insertBefore(document.getElementById(data), e.target);
      source.insertBefore(e.target, document.getElementById(data));
    }
  });
}

这段代码会给表格中的每一行绑定拖拽事件，当用户拖拽其中一行时，会将该行的id设置为拖拽数据，在拖拽过程中阻止默认事件，当用户将行拖拽到另一行上方时，会交换这两行的位置。