Preface

According to the requirements, a self-made draggable and maximized pop-up window assembly is as follows:

The amplification effect is as follows:

No nonsense.

• First, get the width, height and initial window coordinates of the current page, and center them horizontally and vertically:

InitWindow=()=>{
        // Initializing the window in the middle of the current page
        const {pageHeight,PageWidth}=this.state;
        let WindowX=document.body.clientWidth ;
        let WindowY=document.body.clientHeight;
        let pageX=WindowX/2-PageWidth/2;
        let pageY=WindowY/2-pageHeight/2;
        this.WindowWi=WindowX;//Width and height of page
        this.WindowHi=WindowY;
        this.DefpageX=pageX;//Initial coordinates
        this.DefpageY=pageY;
        this.setState({pageX,pageY});
    }

• The window states that can be modified are: width, height, and horizontal and vertical coordinates, so you need to anticipate first. The text is as follows:

<div className="DragWindows" style={{height:pageHeight,width:PageWidth,left:pageX,top:pageY}}>
    <Row className="Header DragWindowsHeader" type="flex" justify="space-between" onMouseDown={this.onMouseDown}>
        <Col className="Title">Title</Col>
        <Col className="Edit">
            <Icon type="scan" className='Header_deformation' onClick={this.deformation}/>
            <Icon type="close" className='Header_close' onClick={this.props.onCancel}/>
        </Col>
    </Row>
    <div className="Content">
    {this.props.children}
    </div>
    <Row className="Footer" type="flex" justify="end">
        <Col>
            <Button onClick={this.props.onCancel}>cancel</Button>
            <Button type="primary" onClick={this.props.onOk}>Determine</Button>
        </Col>
    </Row>
</div>

• All actions are started by pressing the mouse, starting with mouse movement and mouse button up events:

// Public method
    getPosition =(e)=> {
        const titleDom = e.target// Title DOM element titleDom
        const X = titleDom.getBoundingClientRect().left// Coordinates of titleDom (window)
        const Y = titleDom.getBoundingClientRect().top
        let mouseX = e.clientX ;// Coordinates of mouse click (page)
        let mouseY = e.clientY;
        const diffX = mouseX - X// Difference between mouse click position and modal position
        const diffY = mouseY - Y
        return {X, Y, mouseX, mouseY, diffX, diffY};
    }
    // Mouse movement
    onMouseDown =(e)=> {
        const position = this.getPosition(e)
        window.onmousemove = this.onMouseMove;
        window.onmouseup = this.onMouseUp
        this.setState({moving: true, diffX: position.diffX, diffY: position.diffY});
    }
     // Release the mouse and set the modal status to be non movable
    onMouseUp= (e)=> {
        const { moving } = this.state
        moving && this.setState({moving: false});
    }
    // Move the mouse to reset the position of modal
    onMouseMove =(e)=> {
        const {moving, diffX, diffY} = this.state
        if (moving) {
        const position = this.getPosition(e);// Get mouse position data
        const x = position.mouseX - diffX;// Calculate the coordinates that modal should move to with the mouse
        const y = position.mouseY - diffY;
        const { clientWidth, clientHeight } = document.documentElement;// Window size, structure limit, need to be adjusted, minus sidebar width
        const modal = document.getElementsByClassName("DragWindowsHeader")[0]
        if (modal) {
            const maxHeight = clientHeight - modal.offsetHeight;// Calculate the maximum value of modal coordinates
            const maxWidth = clientWidth - modal.offsetWidth;
            const left = x > 0 ? (x < maxWidth ? x : maxWidth) : 0;// Judge the final position of the modal, which shall not exceed the visible window of the browser
            const top = y > 0 ? (y < maxHeight ? y : maxHeight) : 0
            this.setState({pageX: left, pageY: top})
        }
        }
    }

• OK drag function has been implemented. Next, we zoom in and out:

deformation=()=>{
    const {enlarge}=this;
    this.enlarge=!enlarge;
    if(this.enlarge){
        this.setState({pageHeight:this.WindowHi,PageWidth:this.WindowWi,pageX:0,pageY:0});
    }else{
        this.setState({pageHeight:this.DefPageHi,PageWidth:this.DefPageWi,pageX:this.DefpageX,pageY:this.DefpageY});
    }
}

Well, now the scale up and reduction have also been realized. It's a success. The time is tight and the code is simple. Don't laugh!