vue-自定义指令实现鼠标拖动

<template>
  <div id="app">
    <div v-drag class="drag"></div>
  </div>
</template>

<script>
export default {
  name: 'App',
  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 - pageY+'px';
        }
        document.onmouseup = function(){
          document.onmousemove = document.onmouseup = null;
        }
      }
    }
  }
}
</script>

<style>
.drag{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    background-color: green;
}
</style>