vue全局自定义指令-元素拖拽

小白我用的是vue-cli的全家桶,在标签中加入v-drap则实现元素拖拽， 全局指令我是写在main.js中

Vue.directive('drag', {
  inserted: function (el) {
    el.onmousedown=function(ev){
      var disX=ev.clientX-el.offsetLeft;
      var disY=ev.clientY-el.offsetTop;
      document.onmousemove=function(ev){
        var l=ev.clientX-disX;
        var t=ev.clientY-disY;
        el.style.left=l+'px';
        el.style.top=t+'px';
      };
      document.onmouseup=function(){
        document.onmousemove=null;
        document.onmouseup=null;

      };
    };
  }

})

后面肯定要补充放大缩小功能，和把定位，宽度信息保留到vuex中的state中