2017-11-17 18:53:07 +08:00
|
|
|
---
|
2019-11-15 14:35:25 +08:00
|
|
|
order: 26
|
2017-11-17 18:53:07 +08:00
|
|
|
title:
|
|
|
|
en-US: Drag sorting
|
|
|
|
zh-CN: 拖拽排序
|
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
2021-08-03 18:18:38 +08:00
|
|
|
使用自定义元素,我们可以集成 [react-dnd](https://github.com/react-dnd/react-dnd) 来实现拖拽排序。
|
2017-11-17 18:53:07 +08:00
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
2021-08-03 18:18:38 +08:00
|
|
|
By using `components`, we can integrate table with [react-dnd](https://github.com/react-dnd/react-dnd) to implement drag sorting function.
|
2017-11-17 18:53:07 +08:00
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
```jsx
|
2020-06-08 15:28:28 +08:00
|
|
|
import React, { useState, useCallback, useRef } from 'react';
|
2017-11-17 18:53:07 +08:00
|
|
|
import { Table } from 'antd';
|
2021-02-23 10:45:11 +08:00
|
|
|
import { DndProvider, useDrag, useDrop } from 'react-dnd';
|
2020-05-28 23:12:04 +08:00
|
|
|
import { HTML5Backend } from 'react-dnd-html5-backend';
|
2017-11-17 18:53:07 +08:00
|
|
|
import update from 'immutability-helper';
|
|
|
|
|
2021-07-29 19:37:38 +08:00
|
|
|
const type = 'DraggableBodyRow';
|
2017-11-17 18:53:07 +08:00
|
|
|
|
2021-07-29 19:37:38 +08:00
|
|
|
const DraggableBodyRow = ({ index, moveRow, className, style, ...restProps }) => {
|
2021-03-19 17:06:33 +08:00
|
|
|
const ref = useRef();
|
2021-04-21 16:22:04 +08:00
|
|
|
const [{ isOver, dropClassName }, drop] = useDrop({
|
|
|
|
accept: type,
|
|
|
|
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 => {
|
|
|
|
moveRow(item.index, index);
|
|
|
|
},
|
|
|
|
});
|
|
|
|
const [, drag] = useDrag({
|
|
|
|
type,
|
|
|
|
item: { index },
|
|
|
|
collect: monitor => ({
|
|
|
|
isDragging: monitor.isDragging(),
|
2021-02-23 10:45:11 +08:00
|
|
|
}),
|
2021-04-21 16:22:04 +08:00
|
|
|
});
|
2020-03-03 22:19:19 +08:00
|
|
|
drop(drag(ref));
|
2021-03-19 17:06:33 +08:00
|
|
|
|
2020-03-03 22:19:19 +08:00
|
|
|
return (
|
|
|
|
<tr
|
|
|
|
ref={ref}
|
|
|
|
className={`${className}${isOver ? dropClassName : ''}`}
|
|
|
|
style={{ cursor: 'move', ...style }}
|
|
|
|
{...restProps}
|
|
|
|
/>
|
|
|
|
);
|
2017-11-17 18:53:07 +08:00
|
|
|
};
|
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
const columns = [
|
|
|
|
{
|
|
|
|
title: 'Name',
|
|
|
|
dataIndex: 'name',
|
|
|
|
key: 'name',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Age',
|
|
|
|
dataIndex: 'age',
|
|
|
|
key: 'age',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Address',
|
|
|
|
dataIndex: 'address',
|
|
|
|
key: 'address',
|
|
|
|
},
|
|
|
|
];
|
2017-11-17 18:53:07 +08:00
|
|
|
|
2020-06-08 15:28:28 +08:00
|
|
|
const DragSortingTable: React.FC = () => {
|
|
|
|
const [data, setData] = useState([
|
|
|
|
{
|
|
|
|
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',
|
|
|
|
},
|
|
|
|
]);
|
2017-11-17 18:53:07 +08:00
|
|
|
|
2020-06-08 15:28:28 +08:00
|
|
|
const components = {
|
2017-11-17 18:53:07 +08:00
|
|
|
body: {
|
2021-07-29 19:37:38 +08:00
|
|
|
row: DraggableBodyRow,
|
2017-11-17 18:53:07 +08:00
|
|
|
},
|
2019-05-07 14:57:32 +08:00
|
|
|
};
|
2017-11-17 18:53:07 +08:00
|
|
|
|
2020-06-08 15:28:28 +08:00
|
|
|
const moveRow = useCallback(
|
|
|
|
(dragIndex, hoverIndex) => {
|
|
|
|
const dragRow = data[dragIndex];
|
|
|
|
setData(
|
|
|
|
update(data, {
|
2020-01-06 11:13:39 +08:00
|
|
|
$splice: [
|
|
|
|
[dragIndex, 1],
|
|
|
|
[hoverIndex, 0, dragRow],
|
|
|
|
],
|
2020-06-08 15:28:28 +08:00
|
|
|
}),
|
|
|
|
);
|
|
|
|
},
|
|
|
|
[data],
|
|
|
|
);
|
2017-11-17 18:53:07 +08:00
|
|
|
|
2020-06-08 15:28:28 +08:00
|
|
|
return (
|
2021-02-23 10:45:11 +08:00
|
|
|
<DndProvider backend={HTML5Backend}>
|
2020-06-08 15:28:28 +08:00
|
|
|
<Table
|
|
|
|
columns={columns}
|
|
|
|
dataSource={data}
|
|
|
|
components={components}
|
|
|
|
onRow={(record, index) => ({
|
|
|
|
index,
|
|
|
|
moveRow,
|
|
|
|
})}
|
|
|
|
/>
|
|
|
|
</DndProvider>
|
|
|
|
);
|
|
|
|
};
|
2017-11-17 18:53:07 +08:00
|
|
|
|
2019-06-24 13:20:08 +08:00
|
|
|
ReactDOM.render(<DragSortingTable />, mountNode);
|
2019-05-07 14:57:32 +08:00
|
|
|
```
|
2017-11-17 18:53:07 +08:00
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
```css
|
2017-11-17 18:53:07 +08:00
|
|
|
#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;
|
|
|
|
}
|
2019-05-07 14:57:32 +08:00
|
|
|
```
|