ant design table 表格实现拖拽排序

antd官方文档有支持拖拽的写法，参考地址：https://ant.design/components/table-cn/
根据antd的写法实现了拖拽，但是antd的写法只是实现了功能，对代码没有进行封装，如果你想在多个页面进行拖拽，可能写很多重复代码，所以，本人根据官方文档写法进行了组件化，针对多个页面只需引入即可使用。

1.首先引入支持拖拽的相关插件

 npm install react-dnd --save 
 npm install react-dnd-html5-backend --save
 npm install immutability-helper --save

2.在公共组件目录下新增一个dragTable组件文件，如图：

3.在dragTable组件中代码如下:

import React, { Component } from 'react';
import { DragSource, DropTarget } from 'react-dnd';

let dragingIndex = -1;

class BodyRow extends React.Component {
  render() {
    const { isOver, connectDragSource, connectDropTarget, moveRow, ...restProps } = this.props;
    const style = { ...restProps.style, cursor: 'move' };

    let className = restProps.className;
    if (isOver) {
      if (restProps.index > dragingIndex) {
        className += ' drop-over-downward';
      }
      if (restProps.index < dragingIndex) {
        className += ' drop-over-upward';
      }
    }

    return connectDragSource(
      connectDropTarget(<tr {...restProps} className={className} style={style} />),
    );
  }
}

const rowSource = {
  beginDrag(props) {
    dragingIndex = props.index;
    return {
      index: props.index,
    };
  },
};

const rowTarget = {
  drop(props, monitor) {
    const dragIndex = monitor.getItem().index;
    const hoverIndex = props.index;

    // Don't replace items with themselves
    if (dragIndex === hoverIndex) {
      return;
    }

    // Time to actually perform the action
    props.moveRow(dragIndex, hoverIndex);

    // Note: we're mutating the monitor item here!
    // Generally it's better to avoid mutations,
    // but it's good here for the sake of performance
    // to avoid expensive index searches.
    monitor.getItem().index = hoverIndex;
  },
};

export const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
}))(
  DragSource('row', rowSource, connect => ({
    connectDragSource: connect.dragSource(),
  }))(BodyRow),
);

4.在使用拖拽的TableComponent组件页引入

import { DragableBodyRow } from '@/components/dragTable.component';
//同时需要引入
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import update from 'immutability-helper';

//在组件TableComponent 加入的方法
 components = {
    body: {
      row: DragableBodyRow,
    },
  };

  moveRow = (dragIndex, hoverIndex) => {
    const { data } = this.state;
    const dragRow = data[dragIndex];
    this.setState(
      update(this.state, {
        data: {
          $splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]],
        },
      }),() => {
        console.log(this.state.data)
      }
    );
  };
//在组件TableComponent 的render函数内 ,Table增加两个方法
<Table 
      rowSelection={rowSelection}
      dataSource={this.state.data} 
      columns={columns(this,match.params.id,match.params.name)} 
      rowKey={rowKey}
      pagination={pagination}
      components={this.components}  //此处为拖拽新增的方法1
      onRow={(record, index) => ({     //此处为拖拽新增的方法2
        index,
        moveRow: this.moveRow,
      })}
      loading={loading}
      onChange={this.onTablePageChange}
 />

5.最后在导出时包裹

export default DragDropContext(HTML5Backend)(TableComponent)

6.拖拽过程中加入的样式，放在对应scss文件内，引入即可

tr.drop-over-downward td {
  border-bottom: 2px dashed #1890ff;
}

tr.drop-over-upward td {
  border-top: 2px dashed #1890ff;
}