vue 元素可拖动指令

自定义指令

Vue.directive('removable', {
  bind(el, binding, vnode, oldVnode) {
    if (!binding) return
    el.onmousedown = e => {
      el.style.cursor = 'move'
      const [transX, transY] = el.style.transform.match(/\-?\d+/g) || [0, 0]
      document.onmousemove = e1 => {
        e.preventDefault()
        const x = +transX + e1.clientX - e.clientX
        const y = +transY + e1.clientY - e.clientY
        el.style.transform = `translate(${x}px, ${y}px)`
      }
      document.onmouseup = e => {
        el.style.cursor = 'auto'
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

使用方式

<div v-removable></div>