ant-design/components/table/demo/drag-sorting.md

150 lines
3.0 KiB
Markdown
Raw Normal View History

---
order: 26
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) 来实现拖拽排序。
## 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.
2019-05-07 14:57:32 +08:00
```jsx
2020-06-08 15:28:28 +08:00
import React, { useState, useCallback, useRef } from 'react';
import { Table } from 'antd';
import { DndProvider, useDrag, useDrop } from 'react-dnd';
2020-05-28 23:12:04 +08:00
import { HTML5Backend } from 'react-dnd-html5-backend';
import update from 'immutability-helper';
2021-07-29 19:37:38 +08:00
const type = 'DraggableBodyRow';
2021-07-29 19:37:38 +08:00
const DraggableBodyRow = ({ index, moveRow, className, style, ...restProps }) => {
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-04-21 16:22:04 +08:00
});
drop(drag(ref));
return (
<tr
ref={ref}
className={`${className}${isOver ? dropClassName : ''}`}
style={{ cursor: 'move', ...style }}
{...restProps}
/>
);
};
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',
},
];
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',
},
]);
2020-06-08 15:28:28 +08:00
const components = {
body: {
2021-07-29 19:37:38 +08:00
row: DraggableBodyRow,
},
2019-05-07 14:57:32 +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],
);
2020-06-08 15:28:28 +08:00
return (
<DndProvider backend={HTML5Backend}>
2020-06-08 15:28:28 +08:00
<Table
columns={columns}
dataSource={data}
components={components}
onRow={(record, index) => ({
index,
moveRow,
})}
/>
</DndProvider>
);
};
ReactDOM.render(<DragSortingTable />, mountNode);
2019-05-07 14:57:32 +08:00
```
2019-05-07 14:57:32 +08:00
```css
#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
```