前言
在后台应用中,有时会遇到这样的场景:一级类目(可换位、点击出现二级类目、双击改名)、二级类目(拖动换位、拖动换所处一级类目、点击编辑详情)······,如果在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
效果展示:(设计师很忙,样子凑合看。。。)