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

React Beautiful DND是一个用于实现拖放功能的React库，而Material UI是一个流行的React UI组件库。结合这两个库，我们可以很容易地实现在两列之间拖放项目的功能。

首先，我们需要安装React Beautiful DND和Material UI的相关依赖包。可以使用npm或者yarn进行安装。

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>
  );
};

这样，我们就完成了在两列之间拖放项目的功能。当用户拖动项目时，onDragEnd函数会被调用，我们可以在该函数中更新数据状态，从而实现项目的拖放效果。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。