代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
#big{
width: 300px;
height: 300px;
background-color: aqua;
position: relative;
left: 200px;
}
#small{
width: 50px;
height: 50px;
background-color: rgb(100, 107, 107);
position:absolute;
bottom:0;
right:0;
}
#small:hover{
cursor: nw-resize;
}
</style>
<body>
<div id="big">
<div id="small">
</div>
</div>
</body>
<script>
let smallDom=document.getElementById('small')
let bigDom=document.getElementById('big')
smallDom.onmousedown=function(event){
let xDiff=event.offsetX;
let yDiff=event.offsetY;
let right=smallDom.clientWidth-xDiff;
let bottom=smallDom.clientHeight-yDiff;
document.onmousemove=function(event)
{
bigDom.style.width=event.clientX+right-bigDom.offsetLeft+'px';
bigDom.style.height=event.clientY+bottom-bigDom.offsetTop+'px';
}
}
document.onmouseup=function(){
document.onmousemove=null;
}
</script>
</html>
各个值的表示:

效果展示: