vue 元素推拽并记录位置

这里主要是用到vue的自定义指令directives

 <!-- 需要进行推拽的元素 -->
 <div ref="dragBox" v-drag :style="{ top: top, left: left }" class="drag d-flex a-center "/>

对directives进行定义

// 自定义指令
  directives: {
    drag: {
      // 指令的定义
      bind: function(el) {
        const oDiv = el // 获取当前元素
        oDiv.onmousedown = (e) => {
          // 算出鼠标相对元素的位置
          const disX = e.clientX - oDiv.offsetLeft
          const disY = e.clientY - oDiv.offsetTop

          document.onmousemove = (e) => {
            // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            const left = e.clientX - disX
            const top = e.clientY - disY
            oDiv.style.left = left + 'px'
            oDiv.style.top = top + 'px'
          }

          document.onmouseup = (e) => {
            // 记录drag最后的位置并记录
            const left = e.clientX - disX
            const top = e.clientY - disY
            // 记录drag的位置
            window.HMWS_VUE.$EventBus.$emit('updateZoomLoaction', left + 'px', top + 'px')
            document.onmousemove = null
            document.onmouseup = null
          }
        }
      }
    }
  },

window.HMWS_VUE相当于this，在directives没法对data里面的值进行赋值，通过EventBus对元素进行位置记录,这样就完成对元素的推拽与位置的记录

 // 记录drag的位置
    this.$EventBus.$on('updateZoomLoaction', (x, y) => {
      console.log(x,y)
    })