有个容器，右下角有个框，移入点击后移动可以改变容器的大小怎么实现？

张怼怼

39415116189

发布于
2018-12-05

如图，我有个容器，右下角有个pink区域，请问怎么样让鼠标移入按住左键的情况下拖动可以改变容器的大小？谢谢
图片描述

javascript vue.js

阅读 2.1k

4 个回答

得票最新

攻城狮Lee丶

2.8k3833

发布于
2018-12-05

✓ 已被采纳

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width:200px;
                height:200px;
                background-color: red;
                position:relative;
                top:50%;
                left:50%;
            }
            #div2{
                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>

复制代码直接运行