利用移动事件实现拖拽效果

<template>
  <div class="container">
    <div class="drag"
      @touchstart="touchstart"
      @touchmove="touchmove"
      @touchend="touchend"
    ></div>
  </div>
</template>

<script>
export default {
  name: 'game',
  data() {
    return {
      gameObj: {
        count: 0,
        sY: 0,
        sX: 0,
        mY: 0,
        mX: 0,
        tagL: 0,
        tagT: 0,
        leftDis: 0,
        topDis: 0,
      },
      showAnimation: false,
    }
  },
  methods: {
    touchstart(e) {
      console.log(e, 'start')
      this.gameObj.sY = e.touches[0].clientY
      this.gameObj.sX = e.touches[0].clientX
      let tag = e.target
      this.gameObj.tagL = tag.offsetLeft
      this.gameObj.tagT = tag.offsetTop
    },
    touchmove(e) {
      e.preventDefault()
      this.gameObj.mY = e.touches[0].clientY
      this.gameObj.mX = e.touches[0].clientX
      let tag = e.target
      this.gameObj.leftDis = Number(this.gameObj.tagL + (this.gameObj.mX - this.gameObj.sX))
      this.gameObj.topDis = Number(this.gameObj.tagT + (this.gameObj.mY - this.gameObj.sY))
      tag.style.left = this.gameObj.leftDis + 'px'
      tag.style.top = this.gameObj.topDis + 'px'
    },
    touchend(e) {
      // console.log(e, 'end')
    },
  }
}
</script>

<style lang="less">
  .container {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    .drag {
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      top: 0;
      left: 0;
    }
    
  }
</style>