如何使用react漂亮的dnd将任务项移出初始列？

npm install react-dnd react-dnd-html5-backend

import React from 'react';
import { DragSource, DropTarget } from 'react-dnd';
import { ItemTypes } from './constants';

// 定义任务项的DragSource规范
const taskItemSource = {
  beginDrag(props) {
    return {
      id: props.id,
      column: props.column,
    };
  },
};

// 定义任务项的DropTarget规范
const taskItemTarget = {
  drop(props, monitor) {
    const { id: draggedId, column: sourceColumn } = monitor.getItem();
    const { column: targetColumn, onMoveTask } = props;

    // 如果任务项被拖动到不同的列中
    if (sourceColumn !== targetColumn) {
      onMoveTask(draggedId, sourceColumn, targetColumn);
    }
  },
};

// 将DragSource和DropTarget与任务项组件进行包装
const TaskItem = ({ id, column, isDragging, connectDragSource, connectDropTarget }) => {
  const opacity = isDragging ? 0.5 : 1;
  return connectDragSource(
    connectDropTarget(
      <div style={{ opacity }}>
        {/* 任务项的内容 */}
      </div>
    )
  );
};

// 使用DragSource和DropTarget包装任务项组件
export default DragSource(ItemTypes.TASK, taskItemSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging(),
}))(DropTarget(ItemTypes.TASK, taskItemTarget, connect => ({
  connectDropTarget: connect.dropTarget(),
}))(TaskItem));

// 在任务列组件中使用任务项组件
const TaskColumn = ({ column, tasks, onMoveTask }) => {
  return (
    <div>
      {/* 渲染任务项 */}
      {tasks.map(task => (
        <TaskItem key={task.id} id={task.id} column={column} onMoveTask={onMoveTask} />
      ))}
    </div>
  );
};