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上才会有效果
这样拖拽效果就很明显了
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。