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

Z时代
2024-01-10
分类：综合

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;
      };
    };
  }
})