写在 main.js 里

// 注册全局directive - drag,移动元素块(目标元素需使用绝对定位或者固定定位), 使用: v-drag
Vue.directive('drag', {
  inserted(el, binding) {
    let dragBox = el
    dragBox.onmousedown = e => {
      let disX = e.clientX - dragBox.offsetLeft
      let disY = e.clientY - dragBox.offsetTop
      document.onmousemove = e => {
        let left = e.clientX - disX
        let top = e.clientY - disY
        dragBox.style.left = left + 'px'
        dragBox.style.top = top + 'px'
      }
      document.onmouseup = e => {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

使用

image.png