Vue 可拖拽的组件

touchstart： 主要做一些例如 禁止滚动，防止滚动冲突
touchmove: 当手指滚动时，使目标元素（也就是组件）跟随手指的滚动进行移动
touchend： 用于手指移开，判断组件是回到左边还是右边。

   <div class="feedback" ref="drawable" :style="{left: left, top: top}"
         @touchstart="touchstart"
         @touchend="touchend"
         @touchmove="mousemove">
        // 图片自行更换 
      <img src="../../assets/images/personal/feedback.png" alt="" @click="toFeedBack">
    </div>

data(){
   return{
     flag: false,
     top: '80%',
     left: '80%'
   }
},
methods:{
 toFeedBack() {
        this.$router.push({
          path: '/view/feedback-index'
        })
      },
      touchstart() {
        this.flag = true
        // 禁用页面滚动条
        document.getElementsByClassName('wrapper').style = 'overflow: hidden;'
        this.$refs.drawable.style.transition = 'none'
      },
      touchend() {
        this.flag = false
        this.$refs.drawable.style.transition = 'all 0.2s'
        document.getElementsByClassName('wrapper').style = 'overflow: auto;'
        let left = this.$refs.drawable.offsetLeft
        let screenWidth = window.screen.width
        let oWidth = this.$refs.drawable.offsetWidth
        // 判断是回到左边还是右边
        if (left + oWidth / 2 <= screenWidth / 2) {
          this.$refs.drawable.style.left = '0px'
        } else {
          this.$refs.drawable.style.left = screenWidth - oWidth + 'px'
        }
      },
      mousemove(e) {
        // 禁止默认行为，防止在微信上打开和下拉冲突
        e.preventDefault()
        if (this.flag) {
          let clientY = e.targetTouches[0].clientY
          let clientX = e.targetTouches[0].clientX
          let offsetHeight = this.$refs.drawable.offsetHeight
          let offsetWidth = this.$refs.drawable.offsetWidth
          let top = clientY - offsetHeight / 2
          let left = clientX - offsetWidth / 2
          // 屏幕得宽度
          let screenWidth = window.screen.width
          let screenHeight = window.screen.height
          let maxTop = screenHeight - offsetHeight
          let maxLeft = 0
          const halfWidth = screenWidth / 2
          if (this.isOnlyLeft) {
            maxLeft = halfWidth - offsetWidth / 2
          } else {
            maxLeft = screenWidth - offsetWidth
          }
          if (top <= 0) {
            top = 0
          }
          if (top > maxTop) {
            top = maxTop
          }
          if (this.isOnlyRight) {
            if (left <= halfWidth) {
              left = halfWidth
            }
          } else {
            if (left <= 0) {
              left = 0
            }
          }

          left = left > maxLeft ? maxLeft : left

          this.$refs.drawable.style.top = top + 'px'
          this.$refs.drawable.style.left = left + 'px'
        }
      }
}

  .feedback {
    position: fixed;
    z-index: 100;

    img {
      width: 68px;
      height: 76px;
    }

  }

ok，搞定，记录一下