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

小鱼儿 2022-10-01 06:48 150阅读 0赞

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

### 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>
           <div ref="componentBox" @mousemove="onmousermoves">
                <div>
                    <div
                        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>
                        </div>
                    </div>
                  
                  <div v-show="mousedownInfo.status" @mouseup="onmouseups" ref="moveItem" class="mousedownInfo-item">
                    <div class="name" >{
        { mousedownInfo.name }}</div>
                </div>
    
            </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
          this.mousedownInfo.status = false;
        },
    
       }
      }
    </script>
    复制代码

转载于:https://juejin.im/post/5c773adcf265da2db27946f5