如何使用react-beautiful dnd和material ui在两列之间拖放项目

npm install react-beautiful-dnd @material-ui/core

import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { List, ListItem, ListItemText } from '@material-ui/core';

const initialData = {
  column1: {
    id: 'column1',
    title: '列1',
    items: [
      { id: 'item1', content: '项目1' },
      { id: 'item2', content: '项目2' },
      { id: 'item3', content: '项目3' },
    ],
  },
  column2: {
    id: 'column2',
    title: '列2',
    items: [],
  },
};

const [data, setData] = React.useState(initialData);

const onDragEnd = (result) => {
  const { source, destination } = result;

  // 如果没有有效的目标位置，则直接返回
  if (!destination) {
    return;
  }

  // 如果拖放的位置没有发生变化，则直接返回
  if (
    source.droppableId === destination.droppableId &&
    source.index === destination.index
  ) {
    return;
  }

  // 获取拖放的项目
  const item = data[source.droppableId].items[source.index];

  // 从源列中移除项目
  const sourceColumn = {
    ...data[source.droppableId],
    items: [...data[source.droppableId].items],
  };
  sourceColumn.items.splice(source.index, 1);

  // 将项目插入目标列中
  const destinationColumn = {
    ...data[destination.droppableId],
    items: [...data[destination.droppableId].items],
  };
  destinationColumn.items.splice(destination.index, 0, item);

  // 更新数据状态
  setData({
    ...data,
    [source.droppableId]: sourceColumn,
    [destination.droppableId]: destinationColumn,
  });
};

const App = () => {
  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="column1">
        {(provided) => (
          <List
            ref={provided.innerRef}
            {...provided.droppableProps}
          >
            {data.column1.items.map((item, index) => (
              <Draggable
                key={item.id}
                draggableId={item.id}
                index={index}
              >
                {(provided) => (
                  <ListItem
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    <ListItemText primary={item.content} />
                  </ListItem>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </List>
        )}
      </Droppable>
      <Droppable droppableId="column2">
        {(provided) => (
          <List
            ref={provided.innerRef}
            {...provided.droppableProps}
          >
            {data.column2.items.map((item, index) => (
              <Draggable
                key={item.id}
                draggableId={item.id}
                index={index}
              >
                {(provided) => (
                  <ListItem
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    <ListItemText primary={item.content} />
                  </ListItem>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </List>
        )}
      </Droppable>
    </DragDropContext>
  );
};