vue（js） 拖拽改变排序（数组）位置（原理及代码）

先说实现的逻辑（针对操作逻辑对应的事件讲解）：

onmousedown(鼠标按下事件)：

重新获取操作盒子的大小，以及坐标（考虑到客户有可能变更浏览器大小的情况）。

• 获取操作盒子顶部距离
• 获取操作盒子左边距离
• 获取操作盒子的高度
• 获取操作盒子的宽度

鼠标按下获取到按下的item数据，所在item的坐标，（让随鼠标移动的临时dom所在鼠标的位置完全对应上按下时的位置，用户体验像真复制出来的一样）

• 获取按下时数组的index，要删除的位置
• 鼠标点击时的顶部距离 = 鼠标距离浏览器的顶部的高度event.clientY + 浏览器滚动条隐藏的高度document.documentElement.scrollTop
• 鼠标点击时的左边距离 = 鼠标距离浏览器的左边的高度event.clientX + 浏览器滚动条隐藏的距离document.documentElement.scrollLeft
• item的左边距离 = 鼠标点击时的左边距离 - 获取操作盒子左边距离
• item的顶部距离 = （鼠标点击时的顶部距离 - 获取操作盒子顶部距离）% （每个item的高度+边距（我固定了位置这里设置为88，不固定的话可另外计算））

赋值给一个随鼠标移动的临时dom上，先不显示（因为点击是可打开编辑的，移动时再显示）

onmousermove(鼠标移动时的事件):

• 判断临时的dom是否有数据，有数据的时候进行移动，显示出来
• 设置临时dom的top = 鼠标顶部位置event.clientY - 按下时获取到的item的顶部距离 + ‘px’（因为显示的就是距离浏览器窗口坐标，所以不用加上滚动条隐藏的位置）
• 设置临时dom的left = 鼠标左边位置event.clientX - 按下时获取到的item的左边距离 + ‘px’
• 获取鼠标移动到的index位置 = （（鼠标获取到的顶部距离+滚动条隐藏的距离） - 获取操作盒子顶部距离）/ （每个item的高度+边距（我固定了位置这里设置为88，不固定的话可另外计算））四舍五入取整

onmouserup(鼠标释放时的事件):

我们获取到了要删除的index，获取到了鼠标释放前停留的index。只要做数组插入，再重置获取到的数据就可以了。可以做一些细小的调整，比如鼠标移动到的位置进行高亮显示，要插入数据的准确性等等

---

然后，普及一下需要用到的坐标获取方法

获取操作盒子的宽度offsetWidth及高度offsetHeight

给盒子一个ref，不是vue就操作dom

this.offset_width = this.$refs.componentBox.offsetWidth
this.offset_height = this.$