React使用react-sortable-hoc如何實(shí)現(xiàn)拖拽效果

更新時(shí)間：2024年07月08日 09:03:58 作者：枕著光的她

這篇文章主要介紹了React使用react-sortable-hoc如何實(shí)現(xiàn)拖拽效果問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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

我們先看看效果

在react中實(shí)現(xiàn)拖拽效果我使用的是react-sortable-hoc 這個(gè)庫(kù)，

安裝這個(gè)庫(kù)

npm install react-sortable-hoc

同時(shí)要下載 array-move :

npm install array-move

參考文檔： React Sortable Higher-order Components

文檔中引入的是

import arrayMove from 'array-move';

在我的項(xiàng)目中會(huì)報(bào)錯(cuò)，應(yīng)該是版本更新替換了這個(gè)方法，

改成下面這樣就能使用了，講以前用到 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 ( //單個(gè)盒子
        <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">
            {/* 循環(huán)渲染元素 */}
            {items.map((value, index) => (
                <SortableBox key={`item-${index}`} index={index} value={value} />
            ))}
        </div>
    );
};

const SortableBoxList = sortableContainer(BoxList);

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

    useEffect(() => {
        // 從后端請(qǐng)求接口數(shù)據(jù)
        axios.get("http://localhost:3001/list").then(({ data }) => {
            console.log(data);
            setItems(data)
        })
    }, [])

    const onSortEnd = ({ oldIndex, newIndex }) => {
        setItems(arrayMoveImmutable(items, oldIndex, newIndex));  //獲得新舊兩個(gè)index,將數(shù)組進(jìn)行修改
    };

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

export default List;