JS——实现左右可拖动改变宽度的div内容显示区，并且控制拖动范围

素颜马尾好姑娘i 2023-01-12 11:36 135阅读 0赞

[https://blog.csdn.net/bettergg/article/details/89206568][https_blog.csdn.net_bettergg_article_details_89206568]

<!DOCTYPE html>  
<html lang="en">  
   
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
    <title>Document</title>  
    <style>  
        body,  
        html \{  
            margin: 0;  
            padding: 0;  
            height: 100%;  
        \}  
   
        \#box \{  
            width: 600px;  
            height: 500px;  
            overflow: hidden;  
        \}  
   
        \#left \{  
            width: calc(30% - 5px);  
            height: 100%;  
            background: skyblue;  
            float: left;  
        \}  
   
        \#resize \{  
            width: 5px;  
            height: 100%;  
            cursor: w-resize;  
            float: left;  
        \}  
   
        \#right \{  
            float: right;  
            width: 70%;  
            height: 100%;  
            background: tomato;  
        \}  
    </style>  
</head>  
   
<body>  
    <div id="box">  
        <div id="left"></div>  
        <div id="resize"></div>  
        <div id="right"></div>  
    </div>  
    <script>  
        window.onload = function () \{  
            var resize = document.getElementById("resize");  
            var left = document.getElementById("left");  
            var right = document.getElementById("right");  
            var box = document.getElementById("box");  
            resize.onmousedown = function (e) \{  
                var startX = e.clientX;  
                resize.left = resize.offsetLeft;  
                document.onmousemove = function (e) \{  
                    var endX = e.clientX;  
   
                    var moveLen = resize.left + (endX - startX);  
                    var maxT = box.clientWidth - resize.offsetWidth;  
                    if (moveLen < 150) moveLen = 150;  
                    if (moveLen > maxT - 150) moveLen = maxT - 150;  
   
                    resize.style.left = moveLen;  
                    left.style.width = moveLen + "px";  
                    right.style.width = (box.clientWidth - moveLen - 5) + "px";  
                \}  
                document.onmouseup = function (evt) \{  
                    document.onmousemove = null;  
                    document.onmouseup = null;  
                    resize.releaseCapture && resize.releaseCapture();  
                \}  
                resize.setCapture && resize.setCapture();  
                return false;  
            \}  
        \}  
    </script>  
</body>  
   
</html>

[https_blog.csdn.net_bettergg_article_details_89206568]: https://blog.csdn.net/bettergg/article/details/89206568