js实现可拖动的布局

思路：采用flex布局，js即时修改固定列的宽度

注意：父元素需设置position:relative；因offsetLeft和offsetTop是相对于具有定位的（position:absolute或者position：relative）父级元素的距离

html：

<!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>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <script src="./index.js"></script>
</head>

<body>
    <div id="box">
        <div id="left">
        </div>
        <div id="line">
            <a id="line1">
                <span><i class="fa fa-caret-right"></i></span>
            </a>
        </div>
        <div id="right">
        </div>
    </div>
</body>

</html>

css：

body {
    font: 14px/1.5 Arial;
    color: #666;
}

#box {
    position: relative;
    width: 600px;
    height: 400px;
    border: 2px solid #000;
    margin: 10px auto;
    overflow: hidden;
    display: flex;
}

#left {
    height: 100%;
    flex: 1;
    overflow: hidden;
}

#right {
    width: 300px;
    overflow: hidden;
}

#line {
    width: 8px;
    background: lightblue;
    cursor: col-resize;
}

#line a{
    cursor: pointer;
    text-align: center;
}

js：

function $(id) {
    return document.getElementById(id)
}
window.onload = function () {
    var oBox = $("box"),
        oLeft = $("left"),
        oRight = $("right"),
        oLine = $("line"),
        oLine1 = $("line1");
    var flag = true;
    var wid = 0;

    oLine.onmousedown = function (e) {
        var disX = (e || event).clientX;
        var owidth = oBox.clientWidth - oLine.offsetLeft;
        document.onmousemove = function (e) {
            var iT = owidth - ((e || event).clientX - disX);
            var e = e || window.event;
            var maxT = oBox.clientWidth - oLine.offsetWidth;
            oLine.style.margin = 0;
            iT < 30 && (iT = 30);
            iT > maxT && (iT = maxT);
            wid = iT;
            oRight.style.width = iT + "px";
            return false
        };
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
            oLine.releaseCapture && oLine.releaseCapture()
        };
        oLine.setCapture && oLine.setCapture();
        return false
    };

    oLine1.onclick = function () {
        if (flag) {
            oRight.style.width =  30 + "px";
            flag = false;
        } else {
            if (wid && wid > 30) {
                oRight.style.width = wid + "px";
            } else {
                oRight.style.width = 300 + "px";
            }
            flag = true;
        }
    }

};

效果如下：

js实现可拖动的布局

猜你喜欢