基于react+antd的可拖动类目管理子系统

  • Z时代
  • 2024-01-10
  • 分类：综合

react

前言

在后台应用中，有时会遇到这样的场景：一级类目（可换位、点击出现二级类目、双击改名）、二级类目（拖动换位、拖动换所处一级类目、点击编辑详情）······，如果在jQuery时代，想要实现这些需求，我们需要大量的操作的DOM，优化点就是写个函数接收变更数据重新渲染，无疑工程量和性能消耗都是巨大的，且容易出错。借助react或vue的数据视图绑定和性能优异的virtual DOM+diff，我们建立好数据与视图的关系后，就可以只关注数据的改变，视图会同步刷新。

功能略解

左侧一级类目： 点击左边箭头更换位置；点击右边叉叉删除；点击+增加；单击选择类目；双击更改名字。
中间二级类目： 内部拖动更换顺序；拖动至一级类目更改父级；点击右上角叉叉删除；点击最后的“+”增加一栏；单击出现详情编辑；
右侧详情编辑： 一级类目无法在此更改；二级类目名同步更改；图片可更换（需要服务器支持，demo无法使用）；后台类目可以增加删除修改；
下方按钮组： 点击确定保存所有更改（demo中在控制台打印）；点击还原取消所有更改，恢复至初始状态；

主要使用mouseDown、mouseOver、mouseUp等事件改变数据，触发state更新。

GitHub地址： https://github.com/Xiaoleng123/category-manage
预览地址： https://xiaoleng123.github.io/category-manage

效果展示：（设计师很忙，样子凑合看。。。）

以上是 基于react+antd的可拖动类目管理子系统 的全部内容， 来源链接： utcz.com/z/383078.html

回到顶部