多列的左右、上下拖动改变div大小

html部分：

<div class="all">
        <!-- 左右两行拖动 -->
        <div class="drag-main">
            <h2>两列的左右拖动改变div大小</h2>
            <div id="twoBox" class="drag-two-box">
                <div id="twoleft" class="drag-two-left">左</div>
                <div id="tworesize" class="drag-two-resize"></div>
                <div id="tworight" class="drag-two-right">右</div>
            </div>
        </div>
        <!-- 左右三行拖动 -->
        <div class="drag-main">
            <h2>三列的左右拖动改变div大小</h2>
            <ul id="contentId" class="content">
                <li id="leftId" class="left">左</li>
                <li id="resizeOne" class="l-resize"></li>
                <li id="centerId" class="center">中</li>
                <li id="resizeTwo" class="l-resize"></li>
                <li id="rightId" class="right">右</li>
            </ul>
        </div>
        <!-- 两行上下拖动 -->
        <div class="drag-main">
            <h2>两行的上下拖动改变div大小</h2>
            <div id="mainId" class="main">
                <div id="topBoxId" class="topBox">
                    中上
                </div>
                <div id="resizeId" class="r-resize"></div>
                <div id="downBoxId" class="downBox">
                    中下
                </div>
            </div>
        </div>
    </div>

js部分：

function dragTwoColDiv(contentId, leftBoxId, resizeId, rightBoxId) {
        let resize = document.getElementById(resizeId);
        let leftBox = document.getElementById(leftBoxId);
        let rightBox = document.getElementById(rightBoxId);
        let box = document.getElementById(contentId);
        resize.onmousedown = function (e) {
            let startX = e.clientX;
            resize.left = resize.offsetLeft;
            document.onmousemove = function (e) {
                let endX = e.clientX;
                let moveLen = resize.left + (endX - startX);
                let maxT = box.clientWidth - resize.offsetWidth;
                if (moveLen < 150) moveLen = 150;
                if (moveLen > maxT - 150) moveLen = maxT - 150;
                resize.style.left = moveLen;
                leftBox.style.width = moveLen + 'px';
                rightBox.style.width = (box.clientWidth - moveLen - 5) + 'px';
            }
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
                resize.releaseCapture && resize.releaseCapture();
            }
            resize.setCapture && resize.setCapture();
            return false;
        }
    }
    // 三列拖动改变div宽度
    function dragThreeColDiv(contentId, leftBoxId, resizeOne, centerBoxId, resizeTwo, rightBoxId) {
        let resizeO = document.getElementById(resizeOne);
        let resizeT = document.getElementById(resizeTwo);
        let leftBox = document.getElementById(leftBoxId);
        let rightBox = document.getElementById(rightBoxId);
        let centerBox = document.getElementById(centerBoxId);
        let box = document.getElementById(contentId);
        resizeO.onmousedown = function (e) {
            let startX = e.clientX;
            resizeO.left = resizeO.offsetLeft;
            document.onmousemove = function (e) {
                let endX = e.clientX;
                let rightW = rightBox.offsetWidth;
                let moveLen = resizeO.left + (endX - startX);
                let maxT = box.clientWidth - resizeO.offsetWidth;
                if (moveLen < 150) moveLen = 150;
                if (moveLen > maxT - rightW - 150) moveLen = maxT - rightW - 150;
                resizeO.style.left = moveLen;
                leftBox.style.width = moveLen + 'px';
                centerBox.style.width = (box.clientWidth - moveLen - rightW - 10) + 'px';
            }
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
                resizeO.releaseCapture && resizeO.releaseCapture();
            }
            resizeO.setCapture && resizeO.setCapture();
            return false;
        }
        resizeT.onmousedown = function (e) {
            let startX = e.clientX;
            resizeT.left = resizeT.offsetLeft;
            document.onmousemove = function (e) {
                let endX = e.clientX;
                let leftW = leftBox.offsetWidth;
                let moveLen = resizeT.left + (endX - startX) - leftW;
                let maxT = box.clientWidth - resizeT.offsetWidth - 5;
                if (moveLen < 150) moveLen = 150;
                if (moveLen > maxT - leftW - 150) moveLen = maxT - leftW - 150;
                resizeT.style.left = moveLen;
                centerBox.style.width = moveLen + 'px';
                rightBox.style.width = (box.clientWidth - moveLen - leftW - 10) + 'px';
            }
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
                resizeT.releaseCapture && resizeT.releaseCapture();
            }
            resizeT.setCapture && resizeT.setCapture();
            return false;
        }

    }
    // 上下拖动改变上下两个模块的高度
    function dragTwoRowDiv(contentId, topBoxId, resizeId, downBoxId) {
        let resize = document.getElementById(resizeId);
        let topBox = document.getElementById(topBoxId);
        let downBox = document.getElementById(downBoxId);
        let box = document.getElementById(contentId);
        resize.onmousedown = function (e) {
            let startY = e.clientY;
            resize.top = resize.offsetTop;
            document.onmousemove = function (e) {
                let endY = e.clientY;
                let moveLen = resize.top + (endY - startY);
                let maxT = box.clientHeight - resize.offsetHeight;
                if (moveLen < 100) moveLen = 100;
                if (moveLen > maxT - 100) moveLen = maxT - 100;
                resize.style.top = moveLen;
                topBox.style.height = moveLen + "px";
                downBox.style.height = (box.clientHeight - moveLen - 5) + "px";
            }
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
                resize.releaseCapture && resize.releaseCapture();
            }
            resize.setCapture && resize.setCapture();
            return false;
        }
    }

    dragTwoColDiv("twoBox", "twoleft", "tworesize", "tworight");
    dragThreeColDiv("contentId", "leftId", "resizeOne", "centerId", "resizeTwo", "rightId");
    dragTwoRowDiv("mainId", "topBoxId", "resizeId", "downBoxId");

style部分：

<style>
        /*两列 */
        #twoBox {
            display: flex;
        }

        #twoleft {
            width: calc(20% - 10px);
        }

        #tworesize {
            width: 5px;
            cursor: w-resize;
        }

        #tworight {
            width: 80%;
        }

        /* 三列 */
        #contentId {
            display: flex;
        }

        #leftId {
            width: calc(20% - 10px);
        }

        #resizeOne {
            width: 5px;
            cursor: w-resize;
        }

        #centerId {
            width: 60%;
        }

        #resizeTwo {
            width: 5px;
            cursor: w-resize;
        }

        #rightId {
            width: 20%;
        }

        /* 两横 */
        #mainId {
            width: 100%;
            overflow: hidden;
            position: relative;
        }

        #topBoxId {
            height: calc(80% - 5px);
        }

        #resizeId {
            height: 5px;
            cursor: s-resize;
        }

        #downBoxId {
            height: 20%;
        }

        /* // 辅助修饰 */
        .all {
            padding: 30px;
            list-style: none;
        }

        .drag-main {
            margin-bottom: 30px;

            h2 {
                margin-bottom: 30px;
            }
        }

        .drag-two-left {
            background: #1ee3aa;
            height: 100px;
        }

        .drag-two-right {
            background: #eb77eb;
        }

        .drag-two-resize {
            width: 5px;
            cursor: w-resize;
            background: #000;
        }

        .drag-two-box {
            /* // width: 100%; */
            display: flex;



        }

        ul.content {
            display: flex;
            overflow: hidden;


        }

        ul.content li {
            height: 100px;
            list-style-type: none;
        }

        .left {
            background: red;
        }

        .center {
            background: #16ffa6;
            padding: 30px;
            box-sizing: border-box;
        }

        .right {
            background: orange;
        }

        .l-resize {
            background: #000;
        }

        .main {
            height: 300px;


        }

        .topBox {
            background: #1ee3aa;
        }

        .r-resize {
            background: #000;
        }

        .downBox {
            background: #eb77eb;
        }
    </style>