React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React使用react-sortable-hoc拖拽效果

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

作者:枕着光的她

这篇文章主要介绍了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}`} 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;

react-sortable-hoc 拖拽组件的时候消失

直接使用的antd的拖拽手柄例子

正常表格显示

拖拽的时候消失了

拖拽放到第一条放开是可以成功的

这个组件消失就很难受,我加过z-index结果没啥用,实际上z-index要加在拖拽的item上才会有效果

这样拖拽效果就很明显了

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文