React中如何实现静态HTML表格列的拖拽排序？

我想要实现表格列的拖拽排序功能，试过多个库后写出了如下基于动态columns的React表格拖拽代码，该代码可正常运行：

import React, { useState } from 'react';
import './list_de_tournees.css'
const Table = ({ columns }) => {
  const [currentColumns, setCurrentColumns] = useState(columns);

  const handleDragStart = (e, columnIndex) => {
    e.dataTransfer.setData('columnIndex', columnIndex);
  };

  const handleDragOver = (e, columnIndex) => {
    e.preventDefault();
    const dragIndex = e.dataTransfer.getData('columnIndex');
    if (dragIndex !== columnIndex) {
      const newColumns = [...currentColumns];
      const [draggedColumn] = newColumns.splice(dragIndex, 1);
      newColumns.splice(columnIndex, 0, draggedColumn);
      setCurrentColumns(newColumns);
    }
  };

  return (
    <table>
      <thead>
        <tr>
          {currentColumns.map((column, index) => (
            <th
              key={column.id}
              draggable
              onDragStart={(e) => handleDragStart(e, index)}
              onDragOver={(e) => handleDragOver(e, index)}
            >
              {column.Header}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        <tr>
          {currentColumns.map((column, index) => (
            <td key={column.id}>
              {column.accessor === 'name' && 'alice'}
              {column.accessor === 'age' && '30'}
              {column.accessor === 'country' && 'USA'}
            </td>
          ))}
        </tr>
        <tr>
          {currentColumns.map((column, index) => (
            <td key={column.id}>
              {column.accessor === 'name' && 'Bob'}
              {column.accessor === 'age' && '25'}
              {column.accessor === 'country' && 'Canada'}
            </td>
          ))}
        </tr>
        <tr>
          {currentColumns.map((column, index) => (
            <td key={column.id}>
              {column.accessor === 'name' && 'Charlie'}
              {column.accessor === 'age' && '35'}
              {column.accessor === 'country' && 'UK'}
            </td>
          ))}
        </tr>
      </tbody>
    </table>
  );
};

const columns = [
  {
    Header: 'Name',
    accessor: 'name',
    id: '1',
  },
  {
    Header: 'Age',
    accessor: 'age',
    id: '2',
  },
  {
    Header: 'Country',
    accessor: 'country',
    id: '3',
  },
];

function App() {
  return (
    <div className="App">
      <Table columns={columns} />
    </div>
  );
}

export default App;

但我希望改成静态HTML表格并保留拖拽功能，于是尝试了如下写法，却无法实现拖拽效果：

<td draggable onDragStart={(e) => handleDragStart(e, 0)} onDragOver={(e) => handleDragOver(e, 0)}>Alice</td>
<td draggable onDragStart={(e) => handleDragStart(e, 1)} onDragOver={(e) => handleDragOver(e, 1)}>30</td>
<td draggable onDragStart={(e) => handleDragStart(e, 2)} onDragOver={(e) => handleDragOver(e, 2)}>USA</td>

相同的拖拽逻辑在纯HTML、CSS和原生JS环境中可以正常运行。

内容的提问来源于stack exchange，提问作者the_yaz2000