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

React使用react-sortable-hoc拖拽效果

我们先看看效果

在react中实现拖拽效果我使用的是react-sortable-hoc 这个库，

安装这个库

npm install react-sortable-hoc

同时要下载 array-move :

npm install array-move

参考文档： React Sortable Higher-order Components

文档中引入的是

import arrayMove from 'array-move';

在我的项目中会报错，应该是版本更新替换了这个方法，

改成下面这样就能使用了，讲以前用到 arrayMove 的地方都替换成 arrayMoveImmutable；

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}`}  />
            <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;