vue移动端可拖动div

一、plugins下新建drag.js

export default {
  inserted (el) {
    let switchPos = {
      x: 10,
      y: 85,
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0
    }
    el.addEventListener('touchstart', function (e) {
      console.log(e)
      switchPos.startX = e.touches[0].pageX
      switchPos.startY = e.touches[0].pageY
    })
    el.addEventListener('touchend', function (e) {
      switchPos.x = switchPos.endX
      switchPos.y = switchPos.endY
      switchPos.startX = 0
      switchPos.startY = 0
    })
    el.addEventListener('touchmove', function (e) {
      if (e.touches.length > 0) {
        let offsetX = e.touches[0].pageX - switchPos.startX
        let offsetY = e.touches[0].pageY - switchPos.startY
        let x = switchPos.x - offsetX
        let y = switchPos.y - offsetY
        if (x + el.offsetWidth > document.documentElement.offsetWidth) {
          x = document.documentElement.offsetWidth - el.offsetWidth
        }
        if (y + el.offsetHeight > document.documentElement.offsetHeight) {
          y = document.documentElement.offsetHeight - el.offsetHeight
        }
        if (x < 0) { x = 0 }
        if (y < 0) { y = 0 }
        el.style.right = x + 'px'
        el.style.bottom = y + 'px'
        switchPos.endX = x
        switchPos.endY = y
        e.preventDefault()
      }
    })
  }
}

二、在main.js中引入drag.js并全局注册指令

// 引入指令
import vDrag from '@/plugins/drag'
Vue.directive('drag', vDrag)

三、在需要拖动的元素上添加 v-drag 指令

<div class="submitbtn"  v-drag>提交</div>


<style lang="scss" scoped>
  .submitbtn {
    position: fixed;
    right: 76%;
    bottom: 20%;
    border-radius: 24px;
    width: 80px;
    height: 40px;
    background-color: #3A8C50;
    color: #fff;
    line-height: 40px;
    z-index: 99;
  }
</style>