Bootstrap

refs 获取元素位置_vue(js) 拖拽改变排序(数组)位置(原理及代码)

d1c7937ee9769a0a2f8e4aac00335eb9.png

先说实现的逻辑(针对操作逻辑对应的事件讲解):

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,不固定的话可另外计算))四舍五入取整</
;