Vue 原生可拖动div(带手柄)

//HTML
"app1">
    
"drag" >
      
class="toolBarTitle move">移动工具栏div>
    div>
div>

//自定义指令
directives:{
    drag(el){
     el.onmousedown = function(e){
       //获取鼠标点击处分别与div左边和上边的距离：鼠标位置-div位置
       var divx = e.clientX - document.getElementById('drag').offsetLeft;
       var divy = e.clientY - document.getElementById('drag').offsetTop;
       //包含在onmousedown里，表示点击后才移动，为防止鼠标移出div，使用document.onmousemove
       document.onmousemove = function(e){
         //获取移动后div的位置：鼠标位置-divx/divy
         var l = e.clientX - divx;
         var t = e.clientY - divy;
         document.getElementById('drag').style.left=l+'px';
         document.getElementById('drag').style.top=t+'px';
       }
       document.onmouseup = function(e){
         document.onmousemove = null;
         document.onmouseup = null;
       }
     }
    }
}

//style
#drag{
    width: 300px;
    height: 600px;
    position: absolute;
    top: 200px;
    left: 130px;
    border:2px solid #777;
    border-radius: 2px;
    background: #f3f3f3;
}