拖拽分割面板

<!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>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容