There is a container, and there is a box in the lower right corner. How can I change the size of the container by moving in and clicking?

as shown in the picture, I have a container and there is a pink area in the lower right corner. How to move the mouse and hold down the left button to change the size of the container? Thank you

Vue.js javascript
Jan.12,2022 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            -sharpdiv1{
                width:200px;
                height:200px;
                background-color: red;
                position:relative;
                top:50%;
                left:50%;
            }
            -sharpdiv2{
                width:10px;
                height:10px;
                background-color: black;
                position:absolute;
                right:0;
                bottom:0;
            }
        </style>
    <head>
    <body>
        <div id="div1">
            <div id="div2"></div>
        </div>
        <script>
            var oDiv=document.getElementById('div1');
            var oDiv2=document.getElementById('div2');
            oDiv2.onmousedown=function (ev){
                ev=ev||event;
                var disX=ev.clientX-oDiv2.offsetLeft;
                var disY=ev.clientY-oDiv2.offsetTop;
                document.onmousemove=function (ev){
                    ev=ev||event;
                    oDiv.style.width=ev.clientX-disX+oDiv2.offsetWidth+'px';
                    oDiv.style.height=ev.clientY-disY+oDiv2.offsetHeight+'px';
                }
                document.onmouseup=function (){
                    document.onmousemove = document.onmouseup = null;
                }
            }
        </script>
    </body>
</html>

copy the code and run it directly

hold down to get the coordinates, and then let target change the width and height of the target area, but the width and height is a little difficult to calculate.

Let me give you an example:

drag width and height, change position

Add mousedown snooping on the lower right-hand corner of

and remember the position of XMagi y to be held down, add mousemove and mouseup snooping to window.document in mousedown events, calculate the position of mouse movement in mousemove, calculate the offset from XMagi y and resize pink in time, and remove mousemove snooping from mouseup snooping.

ha ha, laugh three times.
div {

resize: both;

}

MDN through train

Previous: Yii2 always fails to install yii2-easy-wechat using composer

Next: The problem follows the vue import export.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1be64a2-31803.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1be64a2-31803.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?