vue实现拖动效果

用于实现一些悬浮在右下角的可拖动的全局按钮

<template>
<div>
  <button ref="content" class="btn">一个按钮</button>
  <Modal v-model="modal" ></Modal>
</div>
</template>

<script>
export default {
  data () {
    return {
      modal: false
    }
  },
  mounted () {
    draggable(this.$refs.content.$el, this.showModal)
  },
  methods: {
    showModal () {
      this.modal = true
    },
    /**
     * @param {drag} element 需要移动的元素
     * @param {fun} function 点击触发的事件
     */
    draggable (drag, fun) {
      var startEvt, moveEvt, endEvt
      // 判断是否支持触摸事件
      if ('ontouchstart' in window) {
        startEvt = 'touchstart'
        moveEvt = 'touchmove'
        endEvt = 'touchend'
      } else {
        startEvt = 'mousedown'
        moveEvt = 'mousemove'
        endEvt = 'mouseup'
      }
      drag.style.cursor = 'grab'
      var disX, disY, left, top, starX, starY, oLeft, oTop
      drag.addEventListener(startEvt, startFun)

      function startFun (event) {
        // 阻止页面的滚动，缩放
        event.preventDefault()
        // 兼容IE浏览器
        drag.style.cursor = 'grabbing'
        var e = event || window.event
        oLeft = drag.offsetLeft
        oTop = drag.offsetTop
        // 手指按下时的坐标
        starX = e.touches ? e.touches[0].clientX : e.clientX
        starY = e.touches ? e.touches[0].clientY : e.clientY
        // 手指相对于拖动元素左上角的位置
        disX = starX - drag.offsetLeft
        disY = starY - drag.offsetTop
        // 按下之后才监听后续事件
        document.addEventListener(moveEvt, moveFun)
        document.addEventListener(endEvt, endFun)
      }

      function moveFun (event) {
        // 兼容IE浏览器
        var e = event || window.event
        left = (e.touches ? e.touches[0].clientX : e.clientX) - disX
        top = (e.touches ? e.touches[0].clientY : e.clientY) - disY
        // 限制拖拽的X范围，不能拖出屏幕
        if (left < 0) {
          left = 0
        } else if (left > document.documentElement.clientWidth - drag.offsetWidth) {
          left = document.documentElement.clientWidth - drag.offsetWidth
        }
        // 限制拖拽的Y范围，不能拖出屏幕
        if (top < 0) {
          top = 0
        } else if (top > window.innerHeight - drag.offsetHeight) {
          top = window.innerHeight - drag.offsetHeight
        }
        drag.style.left = left + 'px'
        drag.style.top = top + 'px'
      }

      function endFun (event) {
        drag.style.cursor = ''
        document.removeEventListener(moveEvt, moveFun)
        document.removeEventListener(endEvt, endFun)
        if (oLeft == drag.offsetLeft && oTop == drag.offsetTop && fun) { // 点击
          fun()
        }
      }
    }

  }
}
</script>

<style scoped>
.btn{
  position: fixed;
  height: 60px;
  bottom: 120px;
  right: 80px;
  text-align: center;
  /* transition: all 0.08s; */
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  z-index: 997;
}
</style>