vue封装自定义指令拖拽

vue封装自定义指令拖拽

我是拖拽红框区域进行拖拽

	// 拖拽
	Vue.directive('drag', {
	  inserted: function (el) {
	    
	   el.onmousedown=function(ev){
	    console.log('自定义指令',el,ev)
	    let aaa = ev.target.parentElement; // 获取目标元素的父级元素
	      //计算出鼠标相对点击元素的位置,ev.clientX获取的是鼠标的位置，OffsetLeft是元素相对于外层元素的位置
	      let x = ev.clientX - aaa.offsetLeft;
	      let y = ev.clientY - aaa.offsetTop;
	      document.onmousemove = ev => {
	        // 获取拖拽元素的位置
	        let left = ev.clientX - x;
	        let top = ev.clientY - y;
	        this.positionX = left;
	        this.positionY = top;
	        //console.log(document.documentElement.clientHeight,aaa.offsetHeight)
	        // 把拖拽元素 放到 当前的位置
	        if (left <= 0) {
	          left = 0;
	        } else if (
	          left >=
	          document.documentElement.clientWidth - aaa.offsetWidth
	        ) {
	          //document.documentElement.clientWidth 屏幕的可视宽度
	          left = document.documentElement.clientWidth - aaa.offsetWidth;
	        }
	        if (top <= 0) {
	          top = 0;
	        } else if (
	          top >=
	          document.documentElement.clientHeight - aaa.offsetHeight
	        ) {
	          // document.documentElement.clientHeight 屏幕的可视高度
	          top = document.documentElement.clientHeight - aaa.offsetHeight;
	        }
	        aaa.style.left = left + 'px';
	        aaa.style.top = top + 'px';
	      };
	      // 为了防止 火狐浏览器 拖拽阴影问题
	      document.onmouseup = ev => {
	        document.onmousemove = null;
	        document.onmouseup = null;
	      };
	
	   };
	  }
	  
	 })

哪里使用哪里加上 v-drag