复杂交互设计：上移、下移、置顶、置底、移除

目前有个需求如下：

 

 这是一个form表单，复杂的地方在于需要前端维护内容数据的上移，下移，置顶、置底、移除

目前，拿到这个需求，接口文档，什么东西都没有，前端如何做设计？

设计文档目录如下：

 

设计思路

 

 

 

数据模型操作demo

思路：前端维护一个实例对象，操作这个对象。数据结构如下，

<TS>{
name：
group：
list：list[{id,type,content……}]
]

注意，用cloneDeep

 

数组操作参考之前写的文章：

https://www.cnblogs.com/youqiancheng/p/11947252.html

https://juejin.cn/post/6871036986900086792

 

demo如下：

let list = [{id:1},{id:2},{id:3},{id:4},{id:5}];
console.log(list,"origin") // 1,2,3,4,5
let temp = null
 
//上移 2->1  结果：2，1，3，4，5
let { id } = list[1]
let index =  list.findIndex(ele => ele.id === id);  //获取点击当前item的id的index
temp = { ...list[index - 1] };
list[index - 1] = { ...list[index] }; //换位置
list[index] = temp;
console.log(list,"2->1,上移")
 
//下移 1->3 结果：2，3，1，4，5
id = list[1].id
index =  list.findIndex(ele => ele.id === id);  //获取点击当前item的id的index
temp = { ...list[index + 1] };
list[index + 1] = { ...list[index] }; //换位置
list[index] = temp;
console.log(list,"1->3,下移")
 
//删除 id=2  结果：3，1，4，5
id = list[0].id
index =  list.findIndex(ele => ele.id === id);  //获取点击当前item的id的index
list.splice(index, 1);
console.log(list,"删除第一个")
 
//splice 插入
//写法
//array.splice(index,0,data1,data2,....);
//参数
//index：数组中需要插入数据的起始位置；
//0：删除的个数为0；
//data1,data2：需要插入的元素，用逗号隔开
 
 
//置顶id:4. 结果：4，3，1，5
index = 2
temp = list[index];
list.splice(index, 1);
list.splice(0,0,temp); //删除操作的那个，然后将删除的item放在数组首位
console.log(list,"4置顶")
 
//置底 id:3  结果：4，1，5，3
index = 1
temp = list[index];
len = list.length //数组长度
list.splice(index, 1);
list.splice(len-1,0,temp); //删除操作的那个，然后将删除的item放在数组末尾
console.log(list,"3置底")

打印完整结果如下：

 

> Array [Object { id: 1 }, Object { id: 2 }, Object { id: 3 }, Object { id: 4 }, Object { id: 5 }] "origin"
> Array [Object { id: 2 }, Object { id: 1 }, Object { id: 3 }, Object { id: 4 }, Object { id: 5 }] "2->1,上移"
> Array [Object { id: 2 }, Object { id: 3 }, Object { id: 1 }, Object { id: 4 }, Object { id: 5 }] "1->3,下移"
> Array [Object { id: 3 }, Object { id: 1 }, Object { id: 4 }, Object { id: 5 }] "删除第一个"
> Array [Object { id: 4 }, Object { id: 3 }, Object { id: 1 }, Object { id: 5 }] "4置顶"
> Array [Object { id: 4 }, Object { id: 1 }, Object { id: 5 }, Object { id: 3 }] "3置底"

以上只是设计文档一部分，上移、下移、置顶、置底、移除很多业务中会有类似的，分享出来，方便以后使用。

设计参考之前写的文章：前端项目整体设计模版