元素拖拽调整位置

使用drag实现元素拖拽，进行位置调整
移动端是不会触发drag事件的

<template>
  <div class="page" id="pageContainer" ref="pageContainer" @drop="drop" @dragover="dragover">
    <button id="button1" class="button1" draggable @dragstart="dragstart">点我</button>
  </div>
</template>

<script>

export default {
  name: 'index',
  components: {},
  props: {},
  data () {
    return {
    }
  },
  computed: {},
  created () {},
  mounted () {
  },
  watch: {},
  methods: {
    // 拖拽事件-开始，移动端不会执行此事件
    dragstart (ev) {
      this.showMask = true
      this.dragEl = document.querySelector(`#${ev.target.id}`)
      // 鼠标起始坐标
      const mouseStart = { x: ev.clientX, y: ev.clientY }
      // 保存元素起始位置
      ev.dataTransfer.setData('dragNodeId', ev.target.id)
      // 保存鼠标起始位置
      ev.dataTransfer.setData('mouseStart', JSON.stringify(mouseStart))
    },
    // 拖拽事件，拖拽过程中
    dragover (ev) {
      ev.stopPropagation()
      ev.preventDefault()
    },
    // 拖拽事件，释放元素-设置停止位置
    drop (ev) {
      ev.stopPropagation()
      ev.preventDefault()
      const nodeId = ev.dataTransfer.getData('dragNodeId')
      const dragEl = document.querySelector(`#${nodeId}`)
      // 1.元素起始位置
      const elStart = { x: dragEl.offsetLeft || 0, y: dragEl.offsetTop || 0 }
      // 2.鼠标移动距离
      // 2.1鼠标开始坐标
      let mouseStart = ev.dataTransfer.getData('mouseStart')
      try {
        mouseStart = JSON.parse(mouseStart)
      } catch (err) {
        mouseStart = { x: 0, y: 0 }
      }
      // 2.2 鼠标结束坐标
      const mouseEnd = { x: ev.clientX, y: ev.clientY }
      // 3. 元素最终位置
      const targetPostion = {
        left: elStart.x + (mouseEnd.x - mouseStart.x),
        top: elStart.y + (mouseEnd.y - mouseStart.y)
      }
      dragEl.style.left = targetPostion.left + 'px'
      dragEl.style.top = targetPostion.top + 'px'
    }
  }
}
</script>

<style lang='scss' scoped>
.page {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.button1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 40px;
  border-radius: 20px;
  background-color: #07c160;
  border: none;
  color: #fff;
  font-size: 18px;
}
.page-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.6);
}
</style>