可拖动的弹出框

// 以下是弹出 对话框的代码实现部分，主要是拖动逻辑


export default class PopDlg extends Component { 
   dlg:any;  
   flag: boolean;  
   startY: number; 
   dy: number;  
   dx: number;  

 
componentDidMount() {    
    const {id} = this.props;    
    this.dlg = document.getElementById(id);    
    if (this.dlg) {      
        this.dlg.addEventListener('mousedown', this.mouseDown, false);   
     }  
}  

componentWillUnmount() {  
     document.removeEventListener('mousedown', this.mouseDown, false);    
     document.removeEventListener('mouseup', this.mouseEnd,false);  
}  

mouseDown = (e:any)=> {   
    if (this.props.visible) {      
        this.flag = true;      
        this.startY = e.clientY;     
        this.dy = e.clientY - this.dlg.offsetTop;      
        this.dx = e.clientX - this.dlg.offsetLeft;     
        e.stopPropagation();     
        document.addEventListener('mousemove', this.mouseMove,false);
        document.addEventListener('mouseup', this.mouseEnd,false);
    }
  }; 
 
mouseMove = (e) => {
    if(this.flag && this.props.visible){
        let top = e.pageY - this.dy;
        // 以下是限制在父组件内部拖动

       if (top  < 0){
        top = 0;
      }else if (top > this.dlg.parentElement.offsetHeight - this.dlg.offsetHeight) {
        top = this.dlg.parentElement.offsetHeight - this.dlg.offsetHeight;
      }
      let left = e.pageX - this.dx; 
     const dragDlgWidth = this.dlg.offsetWidth; 
     if (left < 0) {
        left = 0; 
     }else if (left > this.dlg.parentElement.offsetWidth - dragDlgWidth) {
        left = this.dlg.parentElement - dragDlgWidth;
      } 
     this.dlg.style.top = `${top}px`;
      this.dlg.style.left = `${left}px`; 
     e.preventDefault();
    }
  };

  mouseEnd = () => { 
    this.flag = false;
    document.removeEventListener('mousemove', this.mouseMove,false);
  };  

render() {
    const {visible} = this.props;
    const classStyle = {}; 
    if (!visible) {
        classStyle.visibility = 'hidden' ;
    }
    return(<div className="chart-dlg" id ={id} style = {classStyle}>
         弹出框
    </div>);
  }
}