弓背霞明剑照霜，秋风走马出咸阳。这篇文章主要讲述#yyds干货盘点# ant design中 table的表格行的拖拽实现相关的知识，希望能为你提供帮助。
【#yyds干货盘点# ant design中 table的表格行的拖拽实现】    最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主   放弃很容易但是坚持一定很酷     我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 微信公众号关注小歌谣
前言     首先刚开始知道要书写一个这样的功能我的内心是比较崩溃的 完全没有思路
    然后就打开官网的文档进行观看
开始     一开始准备写 打开官网的一个文档是4.0的 看起来也是一脸的蒙蔽
    接着找到3的一个文档
重点     直接说说如何让实现当前这个功能上代码
代码部分

importTablefrom antd;
importDndProvider, DragSource, DropTargetfrom react-dnd;
importhtml5Backendfrom react-dnd-html5-backend;
import update from immutability-helper;

let dragingIndex = -1;

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

letclassName= restProps;
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;

// Dont replace items with themselves
if (dragIndex === hoverIndex)
return;


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

// Note: were mutating the monitor item here!
// Generally its better to avoid mutations,
// but its good here for the sake of performance
// to avoid expensive index searches.
monitor.getItem().index = hoverIndex;
,
;

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

const columns = [

title: Name,
dataIndex: name,
key: name,
,

title: Age,
dataIndex: age,
key: age,
,

title: Address,
dataIndex: address,
key: address,
,
];

class DragSortingTable extends React.Component
state =
data: [

key: 1,
name: John Brown,
age: 32,
address: New York No. 1 Lake Park,
,

key: 2,
name: Jim Green,
age: 42,
address: London No. 1 Lake Park,
,

key: 3,
name: Joe Black,
age: 32,
address: Sidney No. 1 Lake Park,
,
],
;

components =
body:
row: DragableBodyRow,
,
;

moveRow = (dragIndex, hoverIndex) =>
constdata= https://www.songbingjia.com/android/this.state;
const dragRow = data[dragIndex];

this.setState(
update(this.state,
data:
$splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]],
,
),
);
;

render()
return (
< DndProvider backend=HTML5Backend>
< Table
columns=columns
dataSource=this.state.data
components=this.components
onRow=(record, index) => (
index,
moveRow: this.moveRow,
)
/>
< /DndProvider>
);



ReactDOM.render(< DragSortingTable /> , mountNode);
#components-table-demo-drag-sorting tr.drop-over-downward td
border-bottom: 2px dashed #1890ff;


#components-table-demo-drag-sorting tr.drop-over-upward td
border-top: 2px dashed #1890ff;