VUE原生拖拽列表，移动元素位置

方法名	释义
draggable	设置元素是否允许被拖动。链接和图片默认是可拖动，因此不用设置该属性
dragstart	用户开始拖动元素或选择的文本时触发。
dragover	1.拖动元素或选取的文本正在拖动到放置目标时触发。2.默认情况下，数据/元素不能放置到其他元素中。3.如果要实现改功能，我们需要防止元素的默认处理方法。4.我们可以通过调用event.preventDefault()方法来实现 ondragover 事件。
dragenter	当被鼠标拖动的对象进入其容器范围内时触发此事件
dragend	用户完成元素拖动后触发

<div class="area-content-item" draggable="true" v-for="(item, index) in areaDeviceList" :key="index"
          @dragstart.stop="handleDragStart($event, item)"
          @dragover.prevent.stop="handleDragOver($event, item)"
          @dragend.stop="handleDragEnd($event, item)"
          @dragenter.stop="handleDragEnter($event, item)"
        >
          <div @click="focusModel(item)">{{item.codeName}}</div>
          <div>
            <img src="@/assets/images/scene/areaHidden.png">
            <img src="@/assets/images/scene/areaDel.png" alt="">
          </div>
        </div>

1.加载页面时深拷贝一份数组，以便于后面拖动比较用

created () {
      this.summaryArrCopy = JSON.parse(JSON.stringify(this.areaDeviceList))
    }

2.开始拖拽时，保存一份拖拽的数据

handleDragStart (e, items) {
      // 开始拖动时，暂时保存当前拖动的数据。
      this.dragging = items
    }

3.设置拖动时鼠标的样式

handleDragOver (e) {
      // 在dragenter中针对放置目标来设置!
      e.dataTransfer.dropEffect = 'move'
    }

4.当被鼠标拖动的对象进入其容器范围内时处理数据交换操作

handleDragEnter (e, items) {
      // 为需要移动的元素设置dragstart事件
      e.dataTransfer.effectAllowed = 'move'
      if (items === this.dragging) return
      // 拷贝一份数据进行交换操作。
      const newItems = [...this.areaDeviceList]
      // 获取数组下标
      const src = newItems.indexOf(this.dragging)
      const dst = newItems.indexOf(items)
      // 交换位置
      newItems.splice(dst, 0, ...newItems.splice(src, 1))
      this.$emit('updateDeviceList', newItems)
    }

5.完成元素拖动后判断是否还是原位置，若不是深拷贝最新的数据源

handleDragEnd (e, items) {
      // 是否更换过位置,如果拖拽过后还是原位置，则不调取接口
      const isChangePosition = this.areaDeviceList.some((item, index) => {
        if (item.asset_no === this.summaryArrCopy[index].asset_no) {
          return false
        } else {
          return true
        }
      })
      this.dragging = null
      if (isChangePosition) {
        // 深拷贝最新的源数据，目的是为了判断拖拽的位置是否有没有更换，没有更换就不调接口
        this.areaDeviceList = JSON.parse(JSON.stringify(this.areaDeviceList))
        // 调取接口
        console.log(this.areaDeviceList, '排序过后的数据')
        this.$notify({
          type: 'success',
          title: '提示',
          message: '排序成功',
          duration: 500
        })
      }
    }