原生js实现水平垂直可拖动板块分割布局效果代码-html代码-BFW代码库

代码语言：html

代码描述：原生js实现水平垂直可拖动板块分割布局效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #FFFFFF url(//repo.bfw.wiki/bfwrepo/image/5d65eaff5a217.png) center center;
            background-size: cover;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background-color: #fff;
        }
        ::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: #ccc;
        }
        .container {
            width: 1600px;
            height: 800px;
            margin: 50px auto;
            border: 1px solid darkcyan;
            background-color: rgba(250,250,250,.9);
        }

        [class^="panel"] {
            padding: 20px;
            box-sizing: border-box;
        }
        p {
            text-indent: 2em;
            line-height: 30px;
            color: #666;
        }

        /* 水平布局*/
        .h-container {
            display: flex;
            width: 100%;
            height: 100%;
        }

        .panel-left {
            width: 50%;
            height: 100%;
            overflow: auto;
        }

        .panel-right {
            flex: 1;
            height: 100%;
            padding: 0;
            overflow: hidden;
        }

        /* 垂直bar*/
        .vertical-dragbar {
            padding: 3px;
            cursor: col-resize;
            background: cadetblue url(https://repo.bfw.wiki/bfwrepo/image/vsizegrip.png) center center no-repeat;
        }
        .vertical-dragbar:hover {
            background-color: darkcyan;
        }

        /* 垂直布局*/
        .v-container {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }

        .panel-top {
            width: 100%;
            height: 50%;
            overflow: auto;
        }

        .panel-bottom {
            width: 100%;
            flex: 1;
            overflow: auto;
        }

        /* 水平 bar*/
        .horizontal-dragbar {
            padding: 3px;
            cursor: row-resize;
            background: cadetblue url(https://repo.bfw.wiki/bfwrepo/image/hsizegrip.png) center center no-repeat;
        }
        .horizontal-dragbar:hover {
            background-color: darkcyan;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="h-container" id="hContainer">
            <div class="panel-left" id="drag-left">
                <h2>黄巾起义 群雄逐鹿</h2>
                <p>
                    东汉末年，皇帝昏聩，宦官专权，民不聊生。爆发了大型农民起义——黄巾起义。乱世之中，一代英雄人物竞相涌现。
                </p>
                <p>
                    大将军何进在与十常侍的斗争中被杀，袁绍、曹操等大臣以平“十常侍之乱”为名冲入皇宫，剿杀宦官。在保护汉少帝的过程中，西凉刺史董卓引兵入关，随即掌控大权，废汉少帝，另立陈留王刘协为汉献帝。生性残暴的董卓倒行逆施，引发多方愤然。曹操假借圣旨之名，召集十八路诸侯联合讨伐董卓。虎牢关前，志在匡扶汉室的的刘备、关羽、张飞三兄弟大战吕布。讨董盟军声威浩大，迫使董卓挟献帝逃至长安，最终被司徒王允设连环计除掉。
                </p>
                <p>
                    然而十八路诸侯各怀异心，联盟开始分崩离析。袁绍欲谋取长沙太守孙坚手中的传国玉玺，联合刘表将孙坚杀死。同时，袁绍又在界桥之战中击败公孙瓒，成为北方最强势力。此时的曹操也广招贤才，积聚实力。群雄逐鹿的雏形初成。
                </p>
            </div>
            <div class="vertical-dragbar" id="vDragbar"></div>
            <div class="panel-right" id="drag-right">
                <div class="v-container" id="vContainer">
                    <div class="panel-top" id="drag-top">
                        <h2>衣带秘诏 官渡之战</h2>
                        <p>
                            董卓死后，曹操“挟天子以令诸侯”，迎汉献帝于许昌建都，并运用军事和政治手段除去了袁术、张绣、吕布等人，展现了非凡的治国才能。汉献帝不甘于被曹操胁迫，联合董承、刘备等大臣，秘密颁布“衣带诏”意欲除掉曹操，却因事机不密反遭其害，致使董承等人被杀。刘备侥幸逃脱，前往河北依附袁绍，与关羽张飞兄弟分离。
                        </p>
                        <p>
                            在江东，孙坚之子孙策多年苦心经营，终于称霸江东六郡八十一州，人称“小霸王”。孙策亡故后，其弟孙权继业。孙权在周瑜等人扶持下，为吴国的建立积聚了强大的实力。
                        </p>
                        <p>
                            关羽身在曹营却心念故主，斩颜良诛文丑，千里走单骑，最终与刘备张飞在古城相会。
                        </p>
                        <p>
                            袁绍以“衣带诏”为名，率领大军讨伐曹操，双方于官渡展开艰苦鏖战。袁军虽然势大，但内部勾心斗角，于官渡之战被曹操击败。袁绍气病交加身亡，袁家兄弟又相互猜忌，最终被曹操设计除掉。曹操继而征伐乌桓一统北方，为此后魏国的建立奠定了坚实的基础。
                        </p>
                    </div>
                    <div.........完整代码请登录后点击上方下载按钮下载查看