如何在HTML中拖放一行时使行号自动调整

<table id="myTable">
  <tr>
    <td>1</td>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Row 2</td>
  </tr>
  <!-- 其他行... -->
</table>

var rows = document.querySelectorAll("#myTable tr");

for (var i = 0; i < rows.length; i++) {
  var row = rows[i];
  var handle = row.cells[0];
  
  handle.draggable = true;
  handle.addEventListener("dragstart", handleDragStart);
  handle.addEventListener("dragover", handleDragOver);
  handle.addEventListener("drop", handleDrop);
}

var dragSrc;

function handleDragStart(e) {
  dragSrc = e.target;
  e.dataTransfer.effectAllowed = "move";
  e.dataTransfer.setData("text/html", e.target.innerHTML);
}

function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault();
  }
  e.dataTransfer.dropEffect = "move";
  return false;
}

function handleDrop(e) {
  if (e.stopPropagation) {
    e.stopPropagation();
  }

  if (dragSrc != this) {
    dragSrc.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData("text/html");
  }

  return false;
}