在react js中重新排序列表元素

import React, { useState } from 'react';

const ReorderList = () => {
  const [list, setList] = useState(['Item 1', 'Item 2', 'Item 3', 'Item 4']);

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

  const handleDragOver = (e) => {
    e.preventDefault();
  };

  const handleDrop = (e, index) => {
    const draggedIndex = e.dataTransfer.getData('index');
    const newList = [...list];
    const draggedItem = newList[draggedIndex];

    newList.splice(draggedIndex, 1);
    newList.splice(index, 0, draggedItem);

    setList(newList);
  };

  return (
    <ul>
      {list.map((item, index) => (
        <li
          key={index}
          draggable
          onDragStart={(e) => handleDragStart(e, index)}
          onDragOver={handleDragOver}
          onDrop={(e) => handleDrop(e, index)}
        >
          {item}
        </li>
      ))}
    </ul>
  );
};

export default ReorderList;