JavaScript を使用してテーブルの列幅のドラッグ アンド ドロップ調整を実装するにはどうすればよいですか?

function tableMouseDown(event) {
  // 记录鼠标点击的位置
  const startX = event.clientX;
  // ...
}

function documentMouseMove(event) {
  // 计算鼠标移动的距离
  const distanceX = event.clientX - startX;
  // 动态改变表格列的宽度
  // ...
}

function documentMouseUp() {
  // 停止调整列宽
  // ...
}

function documentMouseMove(event) {
  // 计算鼠标移动的距离
  const distanceX = event.clientX - startX;
  
  // 动态改变表格列的宽度
  const th = document.elementFromPoint(startX, event.clientY);
  const columnIndex = th.cellIndex;
  const table = th.parentNode.parentNode.parentNode;
  const cells = table.querySelectorAll(`tr th:nth-child(${columnIndex + 1}), tr td:nth-child(${columnIndex + 1})`);

  const newWidth = parseFloat(getComputedStyle(cells[0]).width) + distanceX;
  for (const cell of cells) {
    cell.style.width = `${newWidth}px`;
  }
}

function documentMouseUp() {
  // 停止调整列宽
  // ...

  // 记录表格的列宽状态
  const columnWidths = {};
  const table = document.querySelector('table');
  const columns = table.querySelectorAll('th');
  for (const column of columns) {
    columnWidths[column.cellIndex] = parseFloat(getComputedStyle(column).width);
  }
  
  localStorage.setItem('columnWidths', JSON.stringify(columnWidths));
}

window.addEventListener('load', function() {
  const columnWidths = JSON.parse(localStorage.getItem('columnWidths'));
  if (columnWidths) {
    const table = document.querySelector('table');
    const columns = table.querySelectorAll('th');
    for (const [index, width] of Object.entries(columnWidths)) {
      columns[index].style.width = `${width}px`;
    }
  }
});