vue页面拖拽div

模板：

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

指令：

// 自定义指令 实现可拖动
  directives: {
    drag(el, bindings) {
      el.onmousedown = function(e) {
        var disx = e.pageX - el.offsetLeft
        var disy = e.pageY - el.offsetTop
        document.onmousemove = function (e) {
          el.style.left = e.pageX - disx + 'px'
          el.style.top = e.pageY - disy + 'px'
        }
        document.onmouseup = function() {
          document.onmousemove = document.onmouseup = null
        }
      }
    }
  },

样式：

 .drag{
  width: 300px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px dashed rgba(255,0,0,.7);
}