使用react-dnd实现表格之间互相拖拽

/** 
引用 immutability-helper 轮子中的 update； 意为：在不改变原始来源的情况下改变数据副本
　　　useDrag   hook提供一种将组件作为拖动源链接到 react-dnd系统中的方法

*/
  1 import React, { Component } from 'react';
import { DndProvider, useDrag, useDrop } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import { Table } from 'antd';
import { Form } from '@ant-design/compatible';
import update from 'immutability-helper';

const EditableContext = React.createContext();

export default class AppIndex extends Component {
  constructor(props) {
    super(props);
    this.state = {
　　　　　　　// 表格1
      list: [{ id: 1, start: '头下标1', end: '333' }, { id: 2, start: '头下标2', end: '354345' }],
      newList: [// 表格2
        { id: 12, start: '头部下标1', end: 'tb' },
        { id: 112, start: '头部下标2', end: 'yu' },
      ],
      columns: [ // 表格1
        {
          title: '头',
          dataIndex: 'start',
        },
        {
          title: '尾',
          dataIndex: 'end',
        },
      ],
      newColumns: [ // 表格2
        {title: '头部',
          dataIndex: 'start',
        },
        {
          title: '尾否',
          dataIndex: 'end',
        },
      ],
    };
  }

  componentWillUnmount() { // 处理内存泄漏问题
    window.onresize = null;
    this.setState = () => {
      return 0;
    };
  }

  /** 
　　　　　环节拖拽
　　　　　@params dragIndex:拖拽表格对应id
　　　　*/
  moveRow = (dragIndex, hoverIndex, dragName, hoverName) => {
    const { list, newList } = this.state;
    const { state } = this;
    if (dragName === 'table2' && dragName !== hoverName) {
      // 从表2拖
      this.setState(
        update(state, {
          newList: {
            $splice: [[dragIndex, 1]],
          },
          list: { // hoverIndex为undefined 表示从表2开始拖拽到表1的同时，表1没有数据 
            $splice:
              hoverIndex === undefined  
                ? [[0, 0, newList[dragIndex]]]
                : [[hoverIndex, 1, list[hoverIndex]], [hoverIndex, 0, newList[dragIndex]]],
          },
        })
      );
    } else if (dragName === 'table1' && dragName !== hoverName) {
      // 从表1拖
      this.setState(
        update(state, {
          list: {
            $splice: [[dragIndex, 1]],
          },
          newList: {
            // 从上向下拖拽没问题   第一个数组删，第二个数组增
            $splice:
              hoverIndex === undefined
                ? [[0, 0, list[dragIndex]]]
                : [[hoverIndex, 1, newList[hoverIndex]], [hoverIndex, 0, list[dragIndex]]],
          },
        })
      );
    }
  };

  render() {
    const { list, columns, newList, newColumns } = this.state;
    const typeRow = 'DragbleBodyRow';
    const EditableRowDrag = ({index,moveRow,tableName,form,className,style,...restProps }) => {
      const ref = React.useRef();
      const [{ isOver, dropClassName }, drop] = useDrop({ // 开始拖拽
        accept: typeRow,
        collect: monitor => {
          const { index: dragIndex } = monitor.getItem() || {};
          if (dragIndex === index) {
            return {};
          }
          return {
            isOver: monitor.isOver(),
            dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
          };
        },
        drop: item => {
          if (index === undefined) {// 若被放数据的表中没有数据 则index为undefined
            this.moveRow(item.index, index, item.tableName, tableName);
          } else {
            moveRow(item.index, index, item.tableName, tableName);
          }
        },
      });
      const [, drag] = useDrag({  // 准备放下
        item: { type: typeRow, index, tableName },

　　　　　　　　// 收集功能，一个函数，用来收集属性的，返回一个js对象，并且返回值会合并到你的组件属性中 ；monitor：监听器

　　　　　　　　// monitor 里面存放的是一些拖动的状态，当拖动状态发生变化时会通知属性重新获取属性 并重新刷新组件

        collect: monitor => ({
          isDragging: monitor.isDragging(),
        }),
      });
      drop(drag(ref));
      return (
        <EditableContext.Provider value={form}>
          <tr
            ref={ref}
            className={`${className}${isOver ? dropClassName : ''}`}
            style={{ cursor: 'move', ...style }}
            {...restProps}
          />
        </EditableContext.Provider>
      );
    };
    const EditableFormRowDrag = Form.create()(EditableRowDrag);
    const components = {
      // header: {
      //   cell: ResizeableTitle,
      // },
      body: {
        row: EditableFormRowDrag,
        //   cell: EditableCell,
      },
    };

    const NewTable = (
      <>
        <Table
          components={components}
          rowKey="id"
          dataSource={list}
          columns={columns}
          pagination={false}
          onRow={(record, index) => ({
            index,
            moveRow: this.moveRow,
            tableName: 'table1', // 表格唯一标识
          })}
        />
        <br />
        <Table
          components={components}
          rowKey={'id' || Math.random()}
          dataSource={newList}
          columns={newColumns}
          pagination={false}
          onRow={(record, index) => {
            return {
              index,
              moveRow: this.moveRow,
              tableName: 'table2', // 表格唯一标识
            };
          }}
        />
      </>
    );
    return <DndProvider backend={HTML5Backend}>{NewTable}</DndProvider>;
  }
}

 效果展示