react使用react-sortable-hoc实现拖拽

react-sortable-hoc拖拽

安装

 npm install react-sortable-hoc --save

代码如下（示例）：

import React, { useImperativeHandle, forwardRef, memo, useState } from 'react';
 
import { DrawerForm } from '@ant-design/pro-form';
 
import { message, Select ,Table} from 'antd';
 
import { MenuOutlined } from '@ant-design/icons';
 
import { useUpdateEffect } from 'react-use';
 
// 核心代码
 
import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
 
 
 
type ModalProps = {
 
        ref?: React.MutableRefObject<SortTrackDrawerRefObject | undefined>;
 
        onUpdated: () => void;
 
};
 
 
 
export type SortTrackDrawerRefObject = {
 
        openModal: () => void;
 
};
 
 
 
// 定义拖拽的图标
 
const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: 'move', color: '#999' }} />);
 
 
 
const columns = [
 
        {
 
                title: '排序',
 
                align: 'center',
 
                dataIndex: 'sort',
 
                width: 30,
 
                className: 'drag-visible',
 
                render: () => <DragHandle />,
 
        },
 
        {
 
                title: '音频名称',
 
                dataIndex: 'name',
 
                className: 'drag-visible',
 
        },
 
];
 
 
 
const SortTrackDrawer: React.ForwardRefRenderFunction<SortTrackDrawerRefObject, ModalProps> = memo(
 
forwardRef((sProps, ref) => {
 
        const [visible, setVisible] = useState<boolean>(false);
 
        // 拖拽体
 
        const SortableItem = SortableElement((props: any) => <tr {...props} />);
 
       // 拖拽容器
 
        const SortContainer = SortableContainer((props: any) => <tbody {...props} />);
 
       
 
      // 拖拽时原列表替换
 
        const arrayMoveMutable=(array: any[], fromIndex: number, toIndex: number) =>{
 
                const startIndex = fromIndex < 0 ? array.length + fromIndex : fromIndex;
 
                if (startIndex >= 0 && startIndex < array.length) {
 
                        const endIndex = toIndex < 0 ? array.length + toIndex : toIndex;
 
                        const [item] = array.splice(fromIndex, 1);
 
                        array.splice(endIndex, 0, item);
 
                }
 
        }
 
 
 
        // 拖拽时返回新数组
 
        const arrayMoveImmutable=(array: any[], fromIndex: number, toIndex: number) =>{
 
                array = [...array];
 
                arrayMoveMutable(array, fromIndex, toIndex);
 
                return array;
 
        }
 
      
 
        // 拖拽后回调
 
        const onSortEnd = ({ oldIndex, newIndex }:
 
                { oldIndex: number; newIndex: number }) => {
 
                        if (oldIndex !== newIndex) {
 
                                const newData = arrayMoveImmutable([...tableData], oldIndex,                                 newIndex).filter((el) => !!el);
 
                                setTableData([...newData]);
 
                        }
 
        };
 
      
 
       //  获取表格数据
 
        const getTableData = async () => {
 
                try {
 
                        let res = [{
 
                                name:"测试13",
 
                                orderNum:1
 
                                uid:1,
 
                          }]
 
                        setTableData(res);
 
                } finally {
 
 
 
                }
 
        };
 
        
 
       // 确定按钮返回的数据
 
        const handleFinish = async () => {
 
                const uids = tableData.map((item) => item.uid);
 
                console.log(uids)
 
                message.success('排序已更新');
 
                return true;
 
        };
 
       
 
       // 拖拽容器方法
 
        const DraggableContainer = (props: any) => (
 
                <SortContainer
 
                        useDragHandle
 
                         disableAutoscroll
 
                        helperClass="row-dragging"
 
                        onSortEnd={onSortEnd}
 
                        {...props}
 
                />
 
        );
 
 
 
        // 拖拽体方法
 
        const DraggableBodyRow = (props: any) => {
 
                const { className, style, ...restProps } = props;
 
                const index = tableData.findIndex((x) => x.uid === restProps['data-row-key']);
 
                return <SortableItem index={index} {...restProps} />;
 
        };
 
 
 
        // 进入组件加载数据
 
        useUpdateEffect(() => {
 
                getTableData();
 
        }, [orderType]);
 
 
 
return (
 
        <DrawerForm
 
                width={isMobile ? '100%' : 520}
 
                onVisibleChange={setVisible}
 
                title={
 
                        <div className="sort-track-drawer-header">
 
                                <div>拖拽排序({tableData.length})</div>
 
                        </div>
 
                }
 
                visible={visible}
 
                onFinish={handleFinish}
 
                drawerProps={{ closable: false }}
 
                submitter={{
 
                        searchConfig: {
 
                                submitText: '保存排序',
 
                                resetText: '取消',
 
                        },
 
                }}
 
        >
 
                <Table
 
                pagination={false}
 
                dataSource={tableData}
 
                columns={columns as any}
 
                rowKey="uid"
 
                size="small"
 
                showHeader={false}
 
                loading={loading}
 
                components={{
 
                        body: {
 
                                wrapper: DraggableContainer,
 
                                row: DraggableBodyRow,
 
                        },
 
                       }}
 
                />
 
        </DrawerForm>
 
        );
 
        }),
 
);
 
 
 
export default SortTrackDrawer;

效果如图：