refs 获取元素位置_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.$refs.componentBox.offsetHeight

• 获取操作盒子左上角的坐标

offsetLeft和offsetTop这两个方法是距离父元素文档左边距离，距离父元素文档顶部距离，可通过offsetParent做遍历相加，拿到准确坐标

// 获取盒子左上角坐标
      const componentBox = this.$refs.componentBox
      let top = componentBox.offsetTop
      let left = componentBox.offsetLeft
      let parent = componentBox.offsetParent
     //每一层父元素相加一次距离
      while (parent !== null){
        left += parent.offsetLeft;
        top += parent.offsetTop;
        parent = parent.offsetParent;
　　　}

• 获取鼠标距离浏览器顶部坐标event.clientY，但是浏览器可能有滚动条下拉的情况，所以要得到页面的上的准确位置 = 鼠标坐标 + 浏览器被隐藏距（document.documentElement.scrollTop）

---

最后贴上部分主要实现代码