如何在物料界面中将TableItem从一个组件拖放到另一个组件？

import React, { useState } from 'react';

const DragDropContext = React.createContext();

const TableItem = ({ id, text, index, moveItem }) => {
  const [isDragging, setIsDragging] = useState(false);

  const handleDragStart = (e) => {
    setIsDragging(true);
    e.dataTransfer.setData('text/plain', id);
  };

  const handleDragEnd = () => {
    setIsDragging(false);
  };

  return (
    <div
      draggable
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
      style={{ opacity: isDragging ? 0.5 : 1 }}
    >
      {text}
    </div>
  );
};

const TableContainer = ({ items }) => {
  const [list, setList] = useState(items);

  const moveItem = (dragIndex, hoverIndex) => {
    const dragItem = list[dragIndex];
    setList(
      update(list, {
        $splice: [
          [dragIndex, 1],
          [hoverIndex, 0, dragItem],
        ],
      })
    );
  };

  return (
    <DragDropContext.Provider value={{ moveItem }}>
      {list.map((item, index) => (
        <TableItem
          key={item.id}
          id={item.id}
          text={item.text}
          index={index}
          moveItem={(dragIndex, hoverIndex) => moveItem(dragIndex, hoverIndex)}
        />
      ))}
    </DragDropContext.Provider>
  );
};

export default TableContainer;