@ng1005/chrome-extension-common/src/dom/DomDragService.ts

chrome扩展通用库--消息与storage

export class DomDragService{
  move:boolean;
  isEnabled:boolean;
  el:HTMLElement|null;
  constructor (el?:HTMLElement|null) {
    this.move=false;
    this.isEnabled=false;
    this.el=null;
  }
  /**
   * 禁止移动
   */
  disabled(){
    this.isEnabled=false;
  }
  /**
   * 可移动
   */
  enabled(){
    this.isEnabled=true;
  }
 
  drag(el:HTMLElement|null){
    let _x:number,_y:number;
    let _this=this;
    this.isEnabled=true;
    el=el||this.el
    if(!el)return;
    let rect=el.getBoundingClientRect()
    const handlerMousedown=(evt:MouseEvent)=>{
      if(_this.isEnabled===false){
        return;
      }
      rect=el.getBoundingClientRect()
      _x=evt.pageX-parseInt(el.offsetLeft.toString())
      _y=evt.pageY-parseInt(el.offsetTop.toString())
      _this.move=true;
    }
    const handlerMousemove=(evt:MouseEvent)=>{
      if(_this.isEnabled===false){
        return;
      }
      // console.log('rect---',rect)
      if(_this.move){
        el.style.left=evt.pageX-_x+'px';
        el.style.top=evt.pageY-_y+'px';

      }
    }
    const handlerMouseup=(evt:MouseEvent)=>{
      if(_this.isEnabled===false){
        return;
      }
      _this.move=false;
    }
    if(_this.el){
      
      _this.el.addEventListener('mousedown',handlerMousedown);
      _this.el.addEventListener('mousemove',handlerMousemove);
      _this.el.addEventListener('mouseup',handlerMouseup);
      _this.el=el
    }
    el.addEventListener('mousedown',handlerMousedown);
    el.addEventListener('mousemove',handlerMousemove);
    el.addEventListener('mouseup',handlerMouseup);
  }
}
const $drag=new DomDragService()
export default $drag