记录一次失败的宫格拖拽尝试和成功案例

最近平台的监控窗口需要新增拖拽的功能

监控的窗口是原生js写的

经过查询和尝试，原生js动态模板没法设置拖拽（可能我菜）
所以决定将此部分改写为vue写法，静态模板+动态数据
改写流程：
1.js模板改成vue模板

2.给已经准备好的模板添加draggable="true"属性，并且添加开始拖拽、进入目标、释放鼠标、结束拖拽等事件
3.拖拽实现逻辑思路

利用id,当拖拽目标到达目的的释放时，将两者id互换，然后获取#monitorDiv的NodeList列表，利用sort函数将内容重新排序后清空#montiorDiv，再将重排后的列表循环append进#monitorDiv
想得很得体有木有
反正看着easy实际navie，中间不赘述了，都是失败的尝试，还是用jquery写的

错误1：
nodeList没有sort函数
错误2：
nodeList没法使用索引这个概念
解决错误1/2：
将nodeList转成Array

继续：
错误3：
由于id后面的流水很像索引，所以我想当然的这个写法

但是在vue技术中index不是一个双向绑定的数据，
导致当我将0窗口与1窗口拖动换位完成，dom节点重新排序后0.1.2.3.4…
Index的体现.1.0.2.3.4…

并没有因为节点的重新排序而index动态改变顺序。
解决错误3：
既然index不是双向绑定的概念，但是monitorWinNum是的。

查询了一下本系统，发现monitorWinNum只有使用它的长度，
类似：

很好，可以改。
所以将monitorWinNum改成

将所有dom节点有关index的部分换成了item.key

最后很成功。

哈哈哈哈哈哈哈哈