React使用react-sortable-hoc如何实现拖拽效果

npm install react-sortable-hoc

npm install array-move

import arrayMove from 'array-move';

import { arrayMoveImmutable } from 'array-move';

import React, { useEffect, useState } from 'react';
import { sortableContainer, sortableElement } from 'react-sortable-hoc';
import { arrayMoveImmutable } from 'array-move';
import axios from "axios"

const Box = ({ value }) => {
    return ( //单个盒子
        <div className="box">
            <img src={`http://localhost:3001${value.img}`} alt="" />
            <p>{value.name}</p>
        </div>
    );
};

const SortableBox = sortableElement(Box);

const BoxList = ({ items, onSortEnd }) => {
    return (
        <div className="box-list">
            {/* 循环渲染元素 */}
            {items.map((value, index) => (
                <SortableBox key={`item-${index}`} index={index} value={value} />
            ))}
        </div>
    );
};

const SortableBoxList = sortableContainer(BoxList);

const List = () => {
    const [items, setItems] = useState([]);

    useEffect(() => {
        // 从后端请求接口数据
        axios.get("http://localhost:3001/list").then(({ data }) => {
            console.log(data);
            setItems(data)
        })
    }, [])

    const onSortEnd = ({ oldIndex, newIndex }) => {
        setItems(arrayMoveImmutable(items, oldIndex, newIndex));  //获得新旧两个index,将数组进行修改
    };

    return (
        <div>
            <h1>Box List</h1>
            <SortableBoxList items={items} onSortEnd={onSortEnd} />
        </div>
    );
};

export default List;