拖拽分割面板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>split拖拽分割</title>
        <link rel="stylesheet" href="layui/css/layui.css">
        <!-- <script src="https://cdn.jsdelivr.net/npm/split.js@1.6.1/dist/split.min.js"></script> -->
        <script src="./split.js.min.js"></script>
        <style>
            .split{
                width:100%;
                display: flex;
            }
            .split_left{
                width:500px;
                height: 100vh;
                background-color: bisque;
            }
            .split_right{
                 width: calc(100% - 500px);
                 height: 100vh;
                 background-color: aqua;
            }
            .gutter {
                background-color: #eee;
                background-repeat: no-repeat;
                background-position: 50%;
             }
            .gutter.gutter-horizontal {
                background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
                cursor: col-resize;
            }
            
        </style>
    </head>
    <body>
       <div class="split">
         <div class="split_left">
           <p>Pane A</p>
         </div>
         <div class="split_right">
           <p>Pane B</p>
         </div>
       </div>
        <script>
            Split(['.split_left','.split_right'], {
              sizes: [40, 60],
              minSize: 100,
              gutterSize:8,
              direction: 'horizontal',
              onDragEnd: function(e){
                   console.log('我變化了',e);
              }
            })

        </script>
    </body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容