js实现excel表格拖拽排序

要实现表格的拖拽排序，可以使用以下步骤：

1. 给表格中需要排序的行添加拖拽事件监听器。
2. 在拖拽开始时，记录被拖拽的行的索引。
3. 在拖拽过程中，使用一些视觉效果（比如改变背景颜色）来提示用户当前处于哪一行。
4. 在拖拽结束时，将被拖拽的行移动到目标位置，并更新表格数据。

下面是一个简单的实现示例：

HTML：

<table id="sortable-table">
  <thead>
    <tr>
      <th>名称</th>
      <th>数量</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>苹果</td><td>10</td><td>5</td></tr>
    <tr><td>香蕉</td><td>15</td><td>3</td></tr>
    <tr><td>橙子</td><td>8</td><td>4</td></tr>
    <tr><td>梨子</td><td>12</td><td>6</td></tr>
  </tbody>
</table>

JavaScript：

// 获取表格元素
const table = document.getElementById('sortable-table');
// 获取所有可拖拽的行
const rows = table.tBodies[0].rows;
// 记录被拖拽的行的索引
let draggingIndex = -1;

// 给所有可拖拽的行添加事件监听器
for (let i = 0; i < rows.length; i++) {
  const row = rows[i];
  // 记录当前行的索引
  row.draggingIndex = i;
  // 添加拖拽事件监听器
  row.addEventListener('dragstart', e => {
    // 记录被拖拽的行的索引
    draggingIndex = e.target.draggingIndex;
    // 设置拖拽效果
    e.dataTransfer.effectAllowed = 'move';
    // 设置拖拽数据
    e.dataTransfer.setData('text/html', row.innerHTML);
  });
  // 添加拖拽过程中的事件监听器
  row.addEventListener('dragover', e => {
    // 阻止默认行为，使得drop事件能够触发
    e.preventDefault();
    // 设置拖拽效果
    e.dataTransfer.dropEffect = 'move';
    // 获取当前鼠标所在的位置
    const y = e.clientY - table.offsetTop;
    // 遍历所有行，找到当前鼠标所在的位置应该插入的位置
    for (let j = 0; j < rows.length; j++) {
      const row = rows[j];
      if (y > row.offsetTop && y < row.offsetTop + row.offsetHeight) {
        // 如果拖拽的行和目标行不是同一行，则交换位置
        if (draggingIndex !== j) {
          table.tBodies[0].insertBefore(rows[draggingIndex], j > draggingIndex ? rows[j] : rows[j + 1]);
          break;
        }
      }
    }
  });
  // 添加拖拽结束的事件监听器
  row.addEventListener('dragend', e => {
    // 重置被拖拽的行的索引
    draggingIndex = -1;
  });
}

在这个示例中，我们使用了HTML5的拖拽API来实现表格的拖拽排序。在拖拽过程中，我们通过改变被拖拽的行和目标行的位置来实现排序。需要注意的是，这个示例只是一个简单的实现，如果需要支持更复杂的排序方式，比如拖拽多个行或者跨页排序，还需要进行更多的功能扩展。