js的一个拖拽排序问题？

Question

demo在这：https://codepen.io/bruce-zhang/pen/MWdXVyp

功能是切换上面checkbox,生成底下的标签，底下的标签可以拖拽排序。现在的问题是对底下的标签进行拖拽排序之后，上面的checkbox再切换，会对顺序进行重新排列。怎么实现切换上边的checkbox，不对底下的标签产生影响？

Answer 1

原因是
你没有对数据添加sort字段
并且在选中/取消checkbox的时候直接使用了map 没有针对顺序针对处理

根据你这个问题出现的原因去衍生的两个解法
要么你把勾选的数组（也就是渲染下面那个数据的列表数组） 添加一个sort
要么你选中上面的checkbox的时候 判断当前是选中还是取消（这个我相信很好做到 也有很多思路可以判断出来） 如果是选中 就往下面那个数组push就行 反之splice

Answer 2

上面只控制下面菜单的有无；底下控制排序就可以了。

Answer 3

数据应该是这样的：

const data = [{name: '姓名',visible: true, sort: 0},{name: '年龄',visible: false, sort: 1},...];

然后复选框修改visible属性，拖拽排序修改sort属性。

重要 显示时按sort排序结果显示，但是过滤掉visible===false的值。

Answer 4

使用vuedraggable好像很简单。
排序后

选中复选框后