vue中通过自定义指定实现div标签的拖拽

在组件中定义drag指令

directives: {
    drag(el) {
      el.onmousedown = function(e) {
        var x = e.pageX - el.offsetLeft
        var y = e.pageY - el.offsetTop
        document.onmousemove = function (e) {
          el.style.left = e.pageX - x + 'px'
          el.style.top = e.pageY - y + 'px'
        }
        // 鼠标抬起事件
        document.onmouseup = function() {
          document.onmousemove = document.onmouseup = null
        }
      }
    }
  },

需要拖拽的容器标签中添加v-drag

需要注意：需要给div设置固定定位：position：absolute

<div class="drag" v-drag>拖拽</div>