vue 实现拖动元素

HTML：
<div class="box" id="box">
  <div v-drag class="drag"></div>
</div>

//注册局部组件指令
directives: {
  drag: function(el) {
    let dragBox = el; //获取当前元素
    let imgMakeBox;//父盒子
    let moveW = 0;//移动元素的width
    let moveH = 0; //移动元素的height
    let parentW = 0;//父盒子的width
    let parentH = 0;//父盒子的height
    dragBox.onmousedown = e => {
      imgMakeBox = document.getElementById('box'); // 获取父元素
      moveW = dragBox.offsetWidth;
      moveH = dragBox.offsetHeight;
      parentW = imgMakeBox.offsetWidth;//父盒子的width
      parentH = imgMakeBox.offsetHeight;//父盒子的height
      //算出鼠标相对元素的位置
      let disX = e.clientX - dragBox.offsetLeft;
      let disY = e.clientY - dragBox.offsetTop;
      document.onmousemove = e => {
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置