npm install --save react-sortable-hoc
npm install --save array-move

import { SortableHandle } from 'react-sortable-hoc';
import { MenuOutlined } from '@ant-design/icons';

const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />)


{
            title: '拖動(dòng)排序',
            dataIndex: 'sort',
            width: 120,
            align: 'center',
            className: 'drag-visible',
            editable: false,
            render: () =>{
                if (editable) return <DragHandle />;
                return <span>禁止拖動(dòng)</span>
            },
        },

// 在tsx文件中
import React, { useEffect } from 'react';
import { arrayMoveImmutable } from 'array-move';

const Index = () => {
	useEffect(() => {
		let arr = ['a', 'b', 'c']
		let result = arrayMoveImmutable(arr, 1 , 2)
		console.log(result)
		// 結(jié)果輸入為： [ 'a', 'c', 'b' ]
	})
}

export default Index

import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
import { arrayMoveImmutable } from 'array-move';

// 定義拖拽的table 容器
const DragTableContainer = SortableContainer((props) => <tbody {...props}>)

// 定義 拖拽的 行
const DragTableItem = SortableElement((props) => <tr {...props}>)

// 定義拖拽手柄
const DragHandle = SortableHandle(() => (
	<MenuOutlined title='拖拽排序' />
))

// 表格排序方法
const onSortEnd = ({oldIndex, newIndex}: {oldIndex: number; newIndex: number }) => {
        if (oldIndex !== newIndex) {
            const newData: any[] = arrayMoveImmutable(([] as any[]).concat(dataSource), oldIndex, newIndex).filter((el: any) => !!el);
            handleAllSave(newData) // 父組件傳過來(lái)的方法，用于更新表格第一列的序號(hào)
        }
    }

// 所有可拖拽排序元素的容器
// DragTableContainer 是上面通過 SortableContainer 定義的拖拽的table 容器
// useDragHandle  參數(shù)，意思是： 使用行把手拖拽行排序
// disableAutoscroll 參數(shù)，禁止自動(dòng)滾動(dòng)
// helperClass 參數(shù)，可修改拖拽樣式
// onSortEnd   `SortableContainer` 提供的一個(gè)方法，這個(gè)方法可以解構(gòu)兩個(gè)形參：`{ oldIndex ,  newIndex }`，一個(gè)是拖拽元素的標(biāo)記，一個(gè)是將要放的地方的標(biāo)記，用于表格拖拽排序

const DraggableContainer = (props: any) => <DragTableContainer useDragHandle disableAutoscroll helperClass="row-dragging" onSortEnd={onSortEnd} {...props}/>


// 定義 拖拽的 行

// DraggableBodyRow  返回的是由 SortableItem  包裹的每一行元素

const DraggableBodyRow = ({ className, style, ...restProps}: any) => {
    const index = dataSource.findIndex((x: any) => x.orderNum === restProps['data-row-key']);
    return (<SortableItem index={index} {...restProps} />)
}


// ----------------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------------

// 封裝的子組件
const EditableTable = (props: any) => {
    let { title = '', subtitle = '',  columns, rowClassName = () => 'editable-row', dataSource, handleSave, handleAllSave,  rowKey, placeholder,  clickRow, loading = false, scroll } = props;
    const styles = {
        tabletitle: { fontWeight: 800, color: '#0095ff', fontSize: '16px' },
        subtitle: { color: '#000000', fontSize: '12px' },
    };

    columns = columns.map((col: any) => {
        if (!col.editable) {
            return col;
        }
        return {
            ...col,
            onCell: (record: any) => ({
                record,
                isRowDisable: col.isRowDisable,
                isNumber: col.isNumber,
                editable: col.editable,
                editdisable: col.editdisable,
                dataIndex: col.dataIndex,
                title: col.title,
                handleSave: handleSave,
                formRules: col.rules,
                placeholder: col?.placeholder,
                precision: col?.precision,
                min: col?.min,
                step: col?.step,
                max: col?.max,
                formatter: col?.formatter,
                parser: col?.parser,
            }),
        };
    });
    /**
     * 表格行屬性
     * @param record 表格每行的數(shù)據(jù)
     * @returns
     */
    const onRow = (record: any) => {
        return {
            onClick: clickRow ? () => clickRow(record) : undefined,
        }
    }

    const onSortEnd = ({oldIndex, newIndex}: {oldIndex: number; newIndex: number }) => {
        if (oldIndex !== newIndex) {
            const newData: any[] = arrayMoveImmutable(([] as any[]).concat(dataSource), oldIndex, newIndex).filter((el: any) => !!el);
            handleAllSave(newData)
        }
    }

    const DraggableContainer = (props: any) => <SortableBody useDragHandle disableAutoscroll helperClass="row-dragging" onSortEnd={onSortEnd} {...props}/>

    const DraggableBodyRow = ({ className, style, ...restProps}: any) => {
        const index = dataSource.findIndex((x: any) => x.orderNum === restProps['data-row-key']);
        return (<SortableItem index={index} {...restProps} />)
    }

    return (
        <Fragment>
            <div style={{ display: 'flex', marginBottom: '6px' }}>
                <Table
                    className="wrap"
                    style={{ width: '100%' }}
                    locale={{ emptyText: '暫無(wú)數(shù)據(jù)' }}
                    components={{
                        body: {
                            wrapper: DraggableContainer,
                            row: DraggableBodyRow,
                            // cell: EditableCell
                        }
                    }}
                    rowClassName={rowClassName}
                    bordered
                    dataSource={dataSource}
                    columns={columns}
                    pagination={false}
                    rowKey='orderNum'
                    scroll={scroll || { y: 500 }}
                    onRow={onRow}
                    loading={loading}
                />
            </div>
        </Fragment>
    );
};

export default memo(EditableTable);