2020-09-17 16:14:42 +08:00
|
|
|
---
|
|
|
|
order: 13
|
|
|
|
title:
|
|
|
|
zh-CN: 上传列表拖拽排序
|
|
|
|
en-US: Drag sorting of uploadList
|
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
|
|
|
使用 `itemRender` ,我们可以集成 react-dnd 来实现对上传列表拖拽排序。
|
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
|
|
|
By using `itemRender`, we can integrate upload with react-dnd to implement drag sorting of uploadList.
|
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
```tsx
|
2020-09-17 16:14:42 +08:00
|
|
|
import { UploadOutlined } from '@ant-design/icons';
|
2022-05-21 22:14:15 +08:00
|
|
|
import { Button, Tooltip, Upload } from 'antd';
|
2022-05-19 09:46:26 +08:00
|
|
|
import type { UploadFile, UploadProps } from 'antd/es/upload/interface';
|
2022-05-21 22:14:15 +08:00
|
|
|
import update from 'immutability-helper';
|
|
|
|
import React, { useCallback, useRef, useState } from 'react';
|
2021-02-23 10:45:11 +08:00
|
|
|
import { DndProvider, useDrag, useDrop } from 'react-dnd';
|
2020-09-17 16:14:42 +08:00
|
|
|
import { HTML5Backend } from 'react-dnd-html5-backend';
|
|
|
|
|
|
|
|
const type = 'DragableUploadList';
|
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
interface DragableUploadListItemProps {
|
|
|
|
originNode: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
|
|
file: UploadFile;
|
|
|
|
fileList: UploadFile[];
|
|
|
|
moveRow: (dragIndex: any, hoverIndex: any) => void;
|
|
|
|
}
|
|
|
|
|
|
|
|
const DragableUploadListItem = ({
|
|
|
|
originNode,
|
|
|
|
moveRow,
|
|
|
|
file,
|
|
|
|
fileList,
|
|
|
|
}: DragableUploadListItemProps) => {
|
|
|
|
const ref = useRef<HTMLDivElement>(null);
|
2020-09-17 16:14:42 +08:00
|
|
|
const index = fileList.indexOf(file);
|
2021-04-23 10:25:58 +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',
|
|
|
|
};
|
|
|
|
},
|
2022-05-19 09:46:26 +08:00
|
|
|
drop: (item: any) => {
|
2021-04-23 10:25:58 +08:00
|
|
|
moveRow(item.index, index);
|
|
|
|
},
|
|
|
|
});
|
|
|
|
const [, drag] = useDrag({
|
|
|
|
type,
|
|
|
|
item: { index },
|
|
|
|
collect: monitor => ({
|
|
|
|
isDragging: monitor.isDragging(),
|
2020-09-17 16:14:42 +08:00
|
|
|
}),
|
2021-04-23 10:25:58 +08:00
|
|
|
});
|
2020-09-17 16:14:42 +08:00
|
|
|
drop(drag(ref));
|
2021-03-11 17:53:32 +08:00
|
|
|
const errorNode = <Tooltip title="Upload Error">{originNode.props.children}</Tooltip>;
|
2020-09-17 16:14:42 +08:00
|
|
|
return (
|
|
|
|
<div
|
|
|
|
ref={ref}
|
|
|
|
className={`ant-upload-draggable-list-item ${isOver ? dropClassName : ''}`}
|
|
|
|
style={{ cursor: 'move' }}
|
|
|
|
>
|
|
|
|
{file.status === 'error' ? errorNode : originNode}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
const App: React.FC = () => {
|
|
|
|
const [fileList, setFileList] = useState<UploadFile[]>([
|
2020-09-17 16:14:42 +08:00
|
|
|
{
|
|
|
|
uid: '-1',
|
|
|
|
name: 'image1.png',
|
|
|
|
status: 'done',
|
|
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
uid: '-2',
|
|
|
|
name: 'image2.png',
|
|
|
|
status: 'done',
|
|
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
uid: '-3',
|
|
|
|
name: 'image3.png',
|
|
|
|
status: 'done',
|
|
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
uid: '-4',
|
|
|
|
name: 'image4.png',
|
|
|
|
status: 'done',
|
|
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
uid: '-5',
|
|
|
|
name: 'image.png',
|
|
|
|
status: 'error',
|
|
|
|
},
|
|
|
|
]);
|
|
|
|
|
|
|
|
const moveRow = useCallback(
|
2022-05-19 09:46:26 +08:00
|
|
|
(dragIndex: number, hoverIndex: number) => {
|
2020-09-17 16:14:42 +08:00
|
|
|
const dragRow = fileList[dragIndex];
|
|
|
|
setFileList(
|
|
|
|
update(fileList, {
|
|
|
|
$splice: [
|
|
|
|
[dragIndex, 1],
|
|
|
|
[hoverIndex, 0, dragRow],
|
|
|
|
],
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
},
|
|
|
|
[fileList],
|
|
|
|
);
|
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
const onChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
|
2020-09-17 16:14:42 +08:00
|
|
|
setFileList(newFileList);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
2021-02-23 10:45:11 +08:00
|
|
|
<DndProvider backend={HTML5Backend}>
|
2020-09-17 16:14:42 +08:00
|
|
|
<Upload
|
|
|
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
|
|
|
fileList={fileList}
|
|
|
|
onChange={onChange}
|
2020-12-09 17:12:32 +08:00
|
|
|
itemRender={(originNode, file, currFileList) => (
|
|
|
|
<DragableUploadListItem
|
|
|
|
originNode={originNode}
|
|
|
|
file={file}
|
|
|
|
fileList={currFileList}
|
|
|
|
moveRow={moveRow}
|
|
|
|
/>
|
|
|
|
)}
|
2020-09-17 16:14:42 +08:00
|
|
|
>
|
2021-02-23 10:45:11 +08:00
|
|
|
<Button icon={<UploadOutlined />}>Click to Upload</Button>
|
2020-09-17 16:14:42 +08:00
|
|
|
</Upload>
|
|
|
|
</DndProvider>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
export default App;
|
2020-09-17 16:14:42 +08:00
|
|
|
```
|
|
|
|
|
|
|
|
```css
|
|
|
|
#components-upload-demo-drag-sorting .ant-upload-draggable-list-item {
|
|
|
|
border-top: 2px dashed rgba(0, 0, 0, 0);
|
|
|
|
border-bottom: 2px dashed rgba(0, 0, 0, 0);
|
|
|
|
}
|
|
|
|
#components-upload-demo-drag-sorting .ant-upload-draggable-list-item.drop-over-downward {
|
|
|
|
border-bottom-color: #1890ff;
|
|
|
|
}
|
|
|
|
#components-upload-demo-drag-sorting .ant-upload-draggable-list-item.drop-over-upward {
|
|
|
|
border-top-color: #1890ff;
|
|
|
|
}
|
|
|
|
```
|