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）

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

<template>
              ref="componentBox"
              @mousemove="onmousermoves">
                    v-for="(component,componentIndex) in currentCustomPage.components"
                    :key="componentIndex"
                    :class="insertIndex === componentIndex?'move-active':''||(insertIndex === -1&&componentIndex===0)?'move-active-top':''"
                    class="component-item"
                    @mousedown="onmousedowns($event,componentIndex)"
                   <div class="name" @click="handleEditComponent(componentIndex)">{{ component.type_data.data.name }}</div>
                     <div class="component-item_delete" @click="handleDeleteComponent(componentIndex)">删除</div>
              <!-- 鼠标按下临时dom -->
              <div v-show="mousedownInfo.status" @mouseup="onmouseups" ref="moveItem" class="mousedownInfo-item">
                <div class="name" >{{ mousedownInfo.name }}</div>
</template>
<style scoped>
  .move-active{
  border-bottom:2px #409EFF solid!important;
  box-shadow:0 1px 2px #409EFF!important;;
.move-active-top{
  border-top:2px #409EFF solid!important;
  box-shadow:1px 0 2px #409EFF!important;;
</style>
<script>
  export default{
    data(){
       return {
          // 拖拽
      offset_top: null,
      offset_left: null,
      offset_width: null,
      offset_height: null,
      // 临时保存信息，随鼠标移动
      mousedownInfo: {
        name: '',
        index: null,
        status:false,
        width:0,
        height:0
      // 要插入的index
      insertIndex:null,
   methods:{
      // 获取移动父盒子的坐标，大小
    handMove() {
      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;
      this.offset_top = top
      this.offset_left = left
      this.offset_width = componentBox.offsetWidth
      this.offset_height = componentBox.offsetHeight
      // 初始化移动item的宽度
      this.$refs.moveItem.style.width = componentBox.offsetWidth + 'px'
    // 鼠标按下临时保存
    onmousedowns(event, index) {
      // 获取移动父盒子的坐标，大小
      this.handMove()
      const e= event || window.event
      this.mousedownInfo.name = this.currentCustomPage.components[index].type_data.data.name
      // 保存要删除的index
      this.mousedownInfo.index = index
      // 鼠标距离点击元素的宽高
      this.mousedownInfo.width = (e.clientX+document.documentElement.scrollLeft) - this.offset_left
      // （鼠标高度+超出浏览器高度） - 父盒子高度 / 每个item的高度88，取模% =  鼠标所在item的高度
      this.mousedownInfo.height = ((e.clientY+document.documentElement.scrollTop) - this.offset_top) % 88
      // 按下先初始化位置
    /*   this.$refs.moveItem.style.top = (e.clientY - this.mousedownInfo.height) + 'px'
      this.$refs.moveItem.style.left = (e.clientX - this.mousedownInfo.width) + 'px' */
    // 鼠标移动时
    onmousermoves(event) {
      if(this.mousedownInfo.name){
          const e = event || window.event
        // 判断鼠标是否移出了盒子
        if( (e.clientX-this.offset_left)<0 ||(e.clientX-this.offset_left)>this.offset_width
          || ((e.clientY+document.documentElement.scrollTop)- this.offset_top)<-88
          || ((e.clientY+document.documentElement.scrollTop)- this.offset_top)>Number(this.offset_height)+88
          this.resetMove()
          return false
          // 按下移动时展示，不拖拽可以进入编辑
          this.$set(this.mousedownInfo,'status',true)
          const stateIndex = ((e.clientY+document.documentElement.scrollTop)- this.offset_top) / 88
          this.insertIndex = (stateIndex.toFixed(0))-1
          // 根据鼠标位置计算移动item的位置
          this.$refs.moveItem.style.top = (e.clientY - this.mousedownInfo.height) + 'px'
          this.$refs.moveItem.style.left = (e.clientX - this.mousedownInfo.width) + 'px'
    // 鼠标释放时，
    // 进行元素的位置更改
    onmouseups() {
      const item = this.currentCustomPage.components.splice(this.mousedownInfo.index,1)
      this.currentCustomPage.components.splice(this.insertIndex+1,0,item[0])
      this.resetMove()
    // 重置拖拽数据
    resetMove(){
      this.mousedownInfo={
        name:null,
        index:null,
        width:0,
        height:0,
      this.insertIndex = null