前端jQuery实现子元素在父元素中鼠标拖动改变大小

<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<style>
.container{
    position:absolute;
    left:1%;
    top:1%;
    width:98%;
    height:98%;
    border:1px solid black;
}

.item{
    position:absolute;
    left:20%;
    top:20%;
    width:100px;
    height:100px;
    border:1px solid orange;
}
</style>
<div class="container" οnmοusemοve="doMouseMove.apply(this,arguments);">
    <div class="item" οnmοusedοwn="doItemMouseDown.apply(this,arguments);"  
                      οnmοuseup="doItemMouseUp.apply(this,arguments);"
                      οnmοusemοve="doItemMouseMove.apply(this,arguments);"
                      οnmοuseοut="doItemMouseOut.apply(this,arguments);"
                      >
        
    </div>
    
</div>

<script>
    window.vars = {mouseup:false,mousedown:false,coord:{}};
    function doMouseMove(evt){
        if(vars.activeJQ && !vars.mouseup && vars.mousedown){
            let ox = evt.pageX - vars.coord.pageX;
            let oy = evt.pageY - vars.coord.pageY;

            let $target = $(vars.activeJQ);
            let isMouseAtEdge = $target.data('isMouseAtEdge');
            let edgeLocation = $target.data('edgeLocation');
            if(isMouseAtEdge && edgeLocation){
                let nw = evt.pageX - parseInt(vars.coord.left);
                let nh = evt.pageY - parseInt(vars.coord.top);
                
                if(nw > 20 && nh > 20){
                    if(edgeLocation == 'SE'){
                        $target.width(nw);
                        $target.height(nh);
                    }else if(edgeLocation == 'E'){
                        $target.width(nw);
                    }else if(edgeLocation == 'N'){
                        $target.height(nh);
                    }
                }
            }else{
                let nleft = parseInt(vars.coord.left) + ox;
                let ntop  = parseInt(vars.coord.top)  + oy;
                $target.css({"left":nleft + "px","top": ntop + "px"});
                
            }

        }
    }
    
    function doItemMouseDown(evt){
        let $this = $(this);
        vars.activeJQ = this;
        
        vars.mousedown = true;
        vars.mouseup = false;
        
        vars.coord.pageX = evt.pageX;
        vars.coord.pageY = evt.pageY;
        
        let left = $this.css("left");
        let top = $this.css("top");
        if(left){
            vars.coord.left = left.replace("px","");
        }

        if(top){
            vars.coord.top = top.replace("px","");
        }
        
    }

    function doItemMouseUp(evt){
        let $this = $(this);
        vars.activeJQ = null;
        
        vars.mouseup = true;
        vars.mousedown = false;
        
        $this.css('cursor','default');
    }
    
    function doItemMouseMove(evt){
        let $this = $(this);
        
        let fx = evt.offsetX;
        let fy = evt.offsetY;
        let w = $this.width();
        let h = $this.height();
        let LIMIT = 20;

        let ofx = fx - w;
        let ofy = fy - h;

        if(fx > w - LIMIT && fx < w + LIMIT * 2 && !(fy > h - LIMIT && fy < h + LIMIT * 2)){
            $this.css('cursor','e-resize');
            $this.data('isMouseAtEdge',true);
            $this.data('edgeLocation','E');
        }else if(fy > h - LIMIT && fy < h + LIMIT * 2 && !(fx > w - LIMIT && fx < w + LIMIT * 2)){
            $this.css('cursor','n-resize');
            $this.data('isMouseAtEdge',true);
            $this.data('edgeLocation','N');
        }else if((fx > w - LIMIT && fx < w + LIMIT * 2) && (fy > h - LIMIT && fy < h + LIMIT * 2)){
            $this.css('cursor','se-resize');
            $this.data('isMouseAtEdge',true);
            $this.data('edgeLocation','SE');
        }else{
            $this.data('isMouseAtEdge',false);
            $this.data('edgeLocation',null);
        }
    }
    
    function doItemMouseOut(){
        vars.mousedown = false;
        vars.mouseup = false;
        vars.activeJQ = null;
    }
    
    
</script>