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