vue3 ts 引入v-drap

 

dragClass.ts

class Drap{
  static zIndex = 1;
  constructor(el,option={}){
      this.el = el;
      this.x=0;
      this.y=0;
      this.option = option;
      this.init();
  }
  init(){
      this.setEleStyle(this.option||{});
      this.el.onmousedown =(e)=>{
          this.onMouseDown(e)
          this.el.setCapture&&this.el.setCapture() //全局捕获
          return false
      }

  }
  //样式设置
  setEleStyle(option){
      for (const key in option) {
          this.el.style[key] = option[key]
      }
  }

  //按下ele
  onMouseDown(e){
      let zIndex = getComputedStyle(this.el).getPropertyValue('z-index');
      zIndex=isNaN(zIndex)?1:zIndex
      Drap.zIndex =Drap.zIndex>zIndex?Number(Drap.zIndex)+1:Number(zIndex)+1            
      // this.setEleStyle({"zIndex":Drap.zIndex,position:'fixed','cursor': 'move'})  
      this.x = e.clientX-this.el.parentNode.offsetLeft;
      this.y= e.clientY-this.el.parentNode.offsetTop;      
      document.onmousemove=(e)=>this.onMouseMove(e);
      document.onmouseup = (e)=>this.onMouseUp(e)
  }
  //移动move
  onMouseMove(e){
      let X = e.clientX-this.x
      let Y = e.clientY-this.y;
      if(X<10-this.el.offsetWidth){
          X=10-this.el.offsetWidth
      }else if(X>document.documentElement.clientWidth-10){
          X =document.documentElement.clientWidth-10
      }
      if(Y<10-this.el.clientHeight){
          Y=10-this.el.clientHeight
      }else if(Y>document.documentElement.clientHeight-10){
          Y =document.documentElement.clientHeight-10
      } 
      X = X < 100 ? 100 : X
      Y = Y < 63 ? 63 : Y
      let dx = document.documentElement.clientWidth - this.el.parentNode.offsetWidth
      let dy = document.documentElement.clientHeight - this.el.parentNode.clientHeight      
      X = X > dx ? dx : X
      Y = Y > dy ? dy : Y
      this.el.parentNode.style.left = X+'px'
      this.el.parentNode.style.top = Y+'px'
  }
  //释放
  onMouseUp(e){
      document.onmousemove = null
      document.onmouseup =null
      // this.setEleStyle({'cursor': 'pointer'})
      this.el.setCapture&&this.el.setCapture() //释放全局捕获

  }
}

export default Drap

　　

 

drag.ts

import Drap from './dragClass';
export const  drag = {
  mounted(el, binding) { 
      new Drap(el,binding.value||{})
  }
}

 

app.ts引入　

import {drag} from "./directive/VDrag/drag"

app.directive('drag', drag)