盒子拖拽拉伸（和窗口一样的功能）React+Ts

 TS：

import React, { Component, createRef } from "react";
import './index.less'
interface Props {

}
interface State {
    arrList: arr[]
}
interface arr {
    id: symbol,
    text: string


}
export default class Haul extends Component<Props, State>{
    constructor(props: Props) {
        super(props)
        this.state = {
            arrList: [
            ]
        }
    }
    oBox = createRef<HTMLDivElement>()
    Add = createRef<HTMLDivElement>()
    dixs: number = 0
    diys: number = 0
    x: number = 0
    y: number = 0
    abscissa: number = 0
    ordinate: number = 0
    oBoxL: number = 0
    oBoxT: number = 0
    oBoxW: number = 0
    oBoxH: number = 0
    d: string | number = ''
    xx: number = 0
    yy: number = 0

    GetoBox() {
        return this.oBox.current as HTMLDivElement
    }
    // 获取父盒子的边框
    GetDown(ev: React.MouseEvent) {
        this.x = ev.clientX;
        this.y = ev.clientY;
        this.oBoxL = this.GetoBox().offsetLeft;
        // console.log(this.oBoxL);
        this.oBoxT = this.GetoBox().offsetTop;
        // console.log(this.oBoxT);

        this.oBoxW = this.GetoBox().offsetWidth;
        // console.log(this.oBoxW);
        this.oBoxH = this.GetoBox().offsetHeight;
        this.dixs = this.x - this.GetoBox().offsetLeft
        this.diys = this.y - this.GetoBox().offsetTop
        // console.log(this.dixs,this.diys); 
        this.d = '';
        // console.log(this.d);
        // 左线
        if (this.x < this.oBoxL + 10) {
            this.d = 'left';
        }
        // 右线
        else if (this.x > this.oBoxL + this.oBoxW - 10) {
            this.d = 'right';
        }
        // 上线
        if (this.y < this.oBoxT + 10) {
            this.d = 'top';
        }
        // 下线
        else if (this.y >= this.oBoxH + 10) {
            this.d = 'bottom';
        }
        // 左角
        if (this.x < this.oBoxL + 10 && this.y < this.oBoxT + 10) {
            this.d = 'zLT';
        }
        // 右角
        if (this.x < this.oBoxL + this.oBoxW && this.y < this.oBoxT + 10) {
            this.d = 'yLT';
        }
        // 左下角
        if (this.x < this.oBoxL + 10 && this.y >= this.oBoxH + 10) {
            this.d = 'zxLT';
            // console.log(1);
        }
        // 右下角
        if (this.x > this.oBoxL + this.oBoxW - 10 && this.y >= this.oBoxH + 10) {
            this.d = 'yxLT';
        }

        document.onmousemove = this.GetMove.bind(this)
        document.onmouseup = this.Getup.bind(this)
    }
    GetMove(ev: MouseEvent) {
        ev.stopPropagation()
        this.xx = ev.clientX
        this.yy = ev.clientY
        console.log(this.d);
        // 左边
        if (this.d == 'left') {
            this.GetoBox().style.width = this.oBoxW + this.x - this.xx + 'px'
            this.GetoBox().style.left = this.xx + 'px';
        }
        // 右边
        else if (this.d == 'right') {
            this.GetoBox().style.width = this.oBoxW + this.xx - this.x + 'px'
        }
        // 上边
        if (this.d == 'top') {
            this.GetoBox().style.height = this.oBoxH + this.y - this.yy + 'px';
            this.GetoBox().style.top = this.yy + 'px';
        }
        // 下边
        else if (this.d == 'bottom') {
            this.GetoBox().style.height = this.oBoxH - (this.y - this.yy) + 'px'

        }
        // 左角
        if (this.d == 'zLT') {
            this.GetoBox().style.width = this.oBoxW + this.x - this.xx + 'px'
            this.GetoBox().style.left = this.xx + 'px';
            this.GetoBox().style.height = this.oBoxH + this.y - this.yy + 'px';
            this.GetoBox().style.top = this.yy + 'px';
        }
        // 右角
        else if (this.d == 'yLT') {
            this.GetoBox().style.width = this.oBoxW - this.x + this.xx + 'px'
            this.GetoBox().style.height = this.oBoxH + this.y - this.yy + 'px';
            this.GetoBox().style.top = this.yy + 'px';
        }
        // 左下角
        if (this.d == 'zxLT') {
            this.GetoBox().style.width = this.oBoxW - (this.xx - this.x) + 'px'
            this.GetoBox().style.left = this.xx + 'px';
            this.GetoBox().style.height = this.oBoxH - this.y + this.yy + 'px';

        }
        // 右下角
        else if (this.d == 'yxLT') {
            this.GetoBox().style.width = this.oBoxW - this.x + this.xx + 'px'
            this.GetoBox().style.height = this.oBoxH - this.y + this.yy + 'px';

        }
        return false;

    }
    Getup() {
        document.onmousemove = null
        document.onmouseup = null
    }
    // 给子盒子进行绑定鼠标事件 进行拖拽
    GetContent(ev: React.MouseEvent) {
        ev.stopPropagation()
        this.dixs = ev.clientX - this.GetoBox().offsetLeft
        this.diys = ev.clientY - this.GetoBox().offsetTop
        document.onmousemove = this.GetContentMove.bind(this)
        document.onmouseup = this.GetContentUp.bind(this)
    }
    GetContentMove(ev: MouseEvent) {
        // console.log(1);
        this.abscissa = ev.clientX - this.dixs
        this.ordinate = ev.clientY - this.diys
        this.GetoBox().style.left = this.abscissa + 'px'
        this.GetoBox().style.top = this.ordinate + 'px'
    }
    GetContentUp() {
        document.onmousemove = null
        document.onmouseup = null
    }


    Getadd() {
        // this.Add.current as HTMLDivElement
        if (this.state.arrList.length < 5) {
            const newObj = {
                id: Symbol('a'),
                text: '标签'
            }
            this.setState({
                arrList: [...this.state.arrList, newObj]
            })
        }
        // console.log(1);
    }


    render() {
        return (
            <div id="box" ref={this.oBox} onMouseDown={this.GetDown.bind(this)}>
                <div className="content" onMouseDown={this.GetContent.bind(this)}></div>
                <div className="tip">
                    <div className="add" ref={this.Add} onClick={this.Getadd.bind(this)}>+</div>
                    {
                        this.state.arrList.map((item, index) =>
                            <div className="text" key={index}>{item.text}</div>
                        )
                    }
                    <div className="min" title="最小化">-</div>
                    <div className="max" title="最大化">口</div>
                    <div className="revert" title="还原">回</div>
                    <div className="close" title="关闭">X</div>
                </div>
                <div className="resizeL"></div>
                <div className="resizeT"></div>
                <div className="resizeR"></div>
                <div className="resizeB"></div>
                <div className="resizeLT"></div>
                <div className="resizeRT"></div>
                <div className="resizeRB"></div>
                <div className="resizeLB"></div>
            </div>
        )
    }
}

less：

    #box {
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        position: absolute;
        top: 100px;
        left: 100px;
        font-size: 14px;
        box-shadow: 2px 2px 5px gray;
    
        .content{
            width: 80%;
            height: 80%;
            // background-color: red;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin:auto;
            z-index: 1;

        }
    }

    .min {
        width: 15px;
        height: 15px;
        font-size: 15px;
        position: absolute;
        top: 10px;
        right: 50px;
        cursor: default
    }

    .max {
        width: 15px;
        height: 15px;
        font-size: 15px;
        position: absolute;
        top: 10px;
        right: 30px;
        cursor: default
    }

    .add {
        width: 20px;
        height: 20px;
        background-color: #ccc;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        cursor: default
    }

    .text {
        width: 300px;
        
        display: flex;
        justify-content: space-between;

    }

    .revert {
        width: 15px;
        height: 15px;
        font-size: 15px;
        position: absolute;
        top: 10px;
        right: 30px;
        display: none;
        cursor: default
    }

    .close {
        width: 15px;
        height: 15px;
        font-size: 15px;
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: default
    }

    .resizeB {
        width: 100%;
        height: 10px;
        position: absolute;
        bottom: 0;
        cursor: n-resize;

    }

    .resizeL {
        width: 10px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        cursor: w-resize;
    }

    .resizeT {
        width: 100%;
        height: 10px;
        position: absolute;
        top: 0;
        cursor: n-resize;
    }

    .resizeR {
        width: 10px;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        cursor: w-resize;
    }

    .resizeLT {
        width: 10px;
        height: 10px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        cursor: nw-resize;
    }

    .resizeLB {
        width: 10px;
        height: 10px;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
        cursor: ne-resize;
    }

    .resizeRT {
        width: 10px;
        height: 10px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        cursor: ne-resize;
    }

    .resizeRB {
        width: 10px;
        height: 10px;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 2;
        cursor: nw-resize;
    }