1. Upload component based on React + ANTD to implement the function of dragging pictures to sort. Install the plug-in first

yarn add react-sortable-hoc

yarn add react-dnd

yarn add react-dnd-html5-backend

2. Encapsulate drag components

import React, { CSSProperties, memo, useState } from 'react'; import { arrayMove, SortableContainer, SortableElement, SortEnd } from 'react-sortable-hoc'; import './pictureGrid.css'; import { UploadFile } from 'antd/es/upload/interface'; import { UploadChangeParam } from 'antd/lib/upload'; import UploadList from 'antd/es/upload/UploadList'; import { Modal, Upload } from 'antd'; import { Props, SortableItemParams, SortableListParams } from './types'; const itemStyle: CSSProperties = { width: 104, height: 104, margin: 4, cursor: 'grab' }; const SortableItem = SortableElement((params: SortableItemParams) => (<div style={itemStyle}> <UploadList locale={{previewFile: 'preview ', removeFile: ListType ={params.props. ListType} // onPreview={params.onpreview} onRemove={params.onRemove} items={[params.item]} /> </div> )); const listStyle: CSSProperties = { display: 'flex', flexWrap: 'wrap', maxWidth: '100%', }; const SortableList = SortableContainer((params: SortableListParams) => { return ( <div style={listStyle}> {params.items.map((item, index) => ( <SortableItem key={`${item.uid}`} index={index} item={item} props={params.props} // onPreview={params.onPreview} onRemove={params.onRemove} /> ))} <Upload {... params.props} showUploadList={false} onChange={params.onChange} > {params.props.children} </Upload> </div> ); }); const PicturesGrid: React.FC<Props> = memo(({ onChange: onFileChange, ... props }) => { const fileList = props.fileList || []; const files = fileList[fileList.length-1] const onSortEnd = ({ oldIndex, newIndex }: SortEnd) => {//console.log(files,' order ') onFileChange({files, fileList: arrayMove(fileList, oldIndex, newIndex) },props.str); }; const onChange = ({ file,fileList: newFileList }: UploadChangeParam) => { //console.log(file,fileList,'filelits') onFileChange({file, fileList: newFileList },props.str); }; const onRemove = (file: UploadFile) => { console.log('file', file) console.log('fileList', fileList) const newFileList = fileList.filter( (item) => item.keyInd ! == file.keyInd ); onFileChange({ fileList: newFileList },props.str); }; // const onPreview = async (file: UploadFile) => { // await imagePreview(file, ({ image }) => { // setPreviewImage(image); / /}); / /}; Return (<> <SortableList // If the sort event is triggered after moving 1, the default is 0, Distance ={1} items={fileList} onSortEnd={onSortEnd} axis="xy" helperClass="SortableHelper" props={props} onChange={onChange} onRemove={onRemove} //onPreview={onPreview} /> </> ); }); export { PicturesGrid };Copy the code

3. Drag component method definition and drag style

import { UploadProps } from 'antd/lib/upload'; import { UploadChangeParam } from 'antd/lib/upload/interface'; import { ReactNode } from 'react'; export type Props = { onChange: (params: { fileList: UploadFile[] }) => void; children? : ReactNode; } & UploadProps type SortableParams = { props: Omit<Props, 'onChange'>; onPreview: (file: UploadFile) => void; onRemove: (file: UploadFile) => void | boolean; } export type SortableItemParams = { item: UploadFile; } & SortableParams export type SortableListParams = { onChange: (info: UploadChangeParam) => void; items: UploadFile[]; } &sorTableParams /* Drag the style */.SortableHelper {box-shadow: Rgba (0, 0, 0, 0.075) 0 1px 6px, rgba(0, 0, 0, 0.075) 0 1px 4px; background-color: lightgreen; }Copy the code

4. Use within components

import React, { Component } from 'react'; import { Upload } from 'antd'; import { DndProvider, DragSource, DropTarget } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import update from 'immutability-helper'; import { PicturesGrid } from './PicturesGrid'; {SELF_PATH + '/ API /uploadPic'} listType=" picturecard" fileList={this.state[str]} beforeUpload={type == 1 ? this.beforeUpload : this.beforeUploadVideo} onChange={(e) => this.handleImgChange(e, str)} onRemove={(e) => this.RemoveImg(e, STR)} STR ={STR} >Copy the code

5. Effect display (no videos will be uploaded, screenshots will be shown)

Okay, that’s what it means. Leave a message if you have any questions. Main reference: github.com/dreamqyq/an…