拖拽

   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;
        }
    }
        <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>