jquery - 调整框大小时调整左侧 div 框的大小

Question

我在这个页面上找到了调整框事件https://doc.nuxeo.com/display/MAIN/Nuxeo+Documentation+Center+Home当我提到网络时。

无论他们在上面页面上编码什么，我都按照代码设计进行编码。然而，即使我遵循了所有代码，它背后似乎也有东西在运行。

AIM:我希望对我的代码也有同样的效果。看图片，当左右拖动按钮时，左边的深蓝色面板会调整大小。这就是我所期待的..

#splitter {
    min-height: 300px;
    min-width: 600px;
}
.vsplitbar {
    background: #ccc url("/s/en_GB-1988229788/4394/a32f094df7825f58c6a417309475c6c954804a27.101/5.2.3/_/download/resources/com.atlassian.confluence.plugins.doctheme:css-resources/vgrabber.gif") no-repeat scroll center center;
    display: block;
    width: 5px;
}
#splitter #splitter-content, #splitter #splitter-sidebar {
    overflow: auto;
}
div#splitter-sidebar {
    background: #fff none repeat scroll 0 0;
}
#splitter-sidebar {
    background-image: url("/s/en_GB-1988229788/4394/a32f094df7825f58c6a417309475c6c954804a27.101/5.2.3/_/download/resources/com.atlassian.confluence.plugins.doctheme:css-resources/sidebar-shadow.png");
    background-position: right top;
    background-repeat: repeat-y;
    display: block;
}
#splitter #splitter-content, #splitter #splitter-sidebar {
    overflow: auto;
}
#splitter #splitter-content {
    background-color: #010101;
}
a, a:link, a:visited {
    transition: color 0.1s ease 0s;
}

<div class="topNavnar">
    <div id="fw-logo" class="company-logo">
        <div></div>
    </div>
    <div id="IconNav" class="iconsNav">
        <ul class="Icon_Nav nav nav-pills">
            <li><span class="glyphicon glyphicon-calendar"></span>
            </li>
            <li><span class="glyphicon glyphicon-stop"></span>
            </li>
            <li><span class="glyphicon glyphicon-picture"></span>
            </li>
            <li><span class="glyphicon glyphicon-stop"></span>
            </li>
            <li><span class="glyphicon glyphicon-stop"></span><span class="caret"></span>

                </a>
                <ul class="dropdown-menu">
                    <li>list1</li>
                    <li>list2</li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="IconCreate" class="iconsCreate">
        <ul class="Icon_Nav_create nav nav-pills">
            <li><span class="glyphicon glyphicon-stop"></span>
            </li>
            <li><span class="glyphicon glyphicon-search"></span>
            </li>
            <li class="hasButton">
                <button type="button" class="btn btn-default">CREATE +</button>
            </li>
            <li><span class="glyphicon glyphicon-cog"></span>
            </li>
        </ul>
    </div>
</div>
<!-- vertical Navbar -->
<div id="splitter" style="position: relative; border: 2px solid red; height: 482px;">
    <div id="splitter-sidebar" style="position: absolute; left: 0px; height: 482px; width: 435px;">
        <div class="VertopNavnar">
            <div class="List_head">ITEMS</div>
            <ul class="Ver_Icon_Nav_create">
                <li><span class="glyphicon glyphicon-stop"></span> Recent Assets</li>
                <li><span class="glyphicon glyphicon-stop"></span> Something</li>
                <li><span class="glyphicon glyphicon-stop"></span> Something</li>
                <li><span class="glyphicon glyphicon-stop"></span> Something</li>
                <li><span class="glyphicon glyphicon-stop"></span> Something</li>
                <li><span class="glyphicon glyphicon-stop"></span> Something</li>
            </ul>
            <div class="List_head">TAGS</div>
            <div class="List_head"><span class="Folder_count">16</span> FOLDERS</div>
            <ul class="Ver_Icon_Nav_create">
                <li><span class="glyphicon glyphicon-stop"></span> something</li>
                <li><span class="glyphicon glyphicon-search"></span> 2015
                    <ul class="Ver_Nav_Sublist">
                        <li><span class="glyphicon glyphicon-stop"></span> something</li>
                        <li><span class="glyphicon glyphicon-stop"></span> something</li>
                        <li><span class="glyphicon glyphicon-stop"></span> items</li>
                    </ul>
                </li>
                <li><span class="glyphicon glyphicon-cog"></span> Brand items</li>
                <li><span class="glyphicon glyphicon-cog"></span> something</li>
            </ul>
        </div>
    </div>
    <div class="vsplitbar" style="z-index: 4; position: absolute; -moz-user-select: none; cursor: ew-resize; left: 357px; height: 482px; background-color: red;" unselectable="on"><a href="javascript:void(0)" accesskey="L" tabindex="0" title="vsplitbar"></a>
    </div>
    <div id="splitter-content" style="position: absolute; left: 440px; width: 1160px; height: 482px;">
        <div ng-view></div>
    </div>
</div>

但是，在框的左侧[左面板]，出现了调整大小按钮，但是，调整大小时它并没有调整大小，有什么帮助我可以实现这个吗？

Answer 1

以下可能是您的答案。

<div class="panel" id="ui-Resizable" onselectstart="return false;" >
    <div class="title" >Resizable Panel</div>

</div>
<style>
  body{margin:0px;padding:50px;font-size:14px;color:#333}

    .panel{width:400px;height:240px;border:1px solid #ccc;position:relative;min-width:40px;min-height:24px;}
    .panel .title{background:#eee;text-align:center;line-height:30px;border:1px solid #fff;font-weight:bold}

    .ui-Resizable-r{position:absolute;right:0px;top:0px;width:10px;height:100%;cursor: e-resize;}
    .ui-Resizable-b{position:absolute;right:0px;bottom:0px;width:100%;height:10px;cursor: s-resize;}
    .ui-Resizable-rb{position:absolute;right:0px;bottom:0px;width:20px;height:20px;cursor: nw-resize;}

</style>

<script>
    var m_panel , m_ctrl , m_type ;

    var moving = 0 ,m_start_x = 0 , m_start_y = 0 , m_to_x = 0 , m_to_y = 0  ;

        var m_min_w = 100,m_min_h = 40;

        function on_mousedown( e , panel ,ctrl , type ){
        var e = e || window.event;

                m_start_x =  e.pageX - ctrl.offsetLeft;
        m_start_y =  e.pageY - ctrl.offsetTop;

        m_panel = panel;
        m_ctrl  = ctrl;
        m_type  = type;

        moving = setInterval(on_move,10);

    }
    document.onmousemove = function( e ){
        var e = window.event || e;
        m_to_x = e.pageX;
        m_to_y = e.pageY;
    }
    function on_move(){

        if(moving){

            var min_left = m_panel.offsetLeft
            var min_top  = m_panel.offsetTop 

            var to_x = Math.max(min_left+ m_min_w,m_to_x - m_start_x) ;
            var to_y = Math.max(min_top + m_min_h,m_to_y - m_start_y) ;

                            var grid = 50;

            var grid_w = to_x + ( m_type == 'rb' ? 20:10 ) ;
                grid_w = grid_w-grid_w%grid;

            var grid_h = to_y + ( m_type == 'rb' ? 20:10 ) ;
                grid_h = grid_h-grid_w%grid;


            switch(  m_type ){
                case 'r' :
                    m_ctrl.style.left =  to_x + "px";
                    m_panel.style.width=grid_w+'px';
                break;
                case 'b' :
                    m_ctrl.style.top  = to_y+ "px";
                    m_panel.style.height=grid_h+'px';
                break;
                case 'rb' :
                    m_ctrl.style.left =to_x + "px";
                    m_ctrl.style.top  =to_y+ "px";

                    m_panel.style.width=grid_w+'px';
                    m_panel.style.height=grid_h+'px';
                break;
            }
        }

    }

        document.onkeyup = document.onmouseup = function(e){
        clearInterval(moving);
        var cls = document.getElementsByClassName('ui-Resizable-ctrl');
        for(var i=0;i<cls.length;i++){
            cls[i].style.left = '';
            cls[i].style.top = '';
        }
    }

        function Resizable( panelId ){

        var panel = document.getElementById(panelId);
                var r = document.createElement("div");
        var b = document.createElement("div");
        var rb = document.createElement("div");

        r.class = r.className   = 'ui-Resizable-r  ui-Resizable-ctrl';
        b.class = b.className   = 'ui-Resizable-b  ui-Resizable-ctrl';
        rb.class = rb.className = 'ui-Resizable-rb ui-Resizable-ctrl';

        panel.appendChild(r);
        panel.appendChild(b);
        panel.appendChild(rb);

                r.addEventListener('mousedown',function(e){
            on_mousedown(e,panel,r,'r');
        })
        b.addEventListener('mousedown',function(e){
            on_mousedown(e,panel,b,'b');
        })
        rb.addEventListener('mousedown',function(e){
            on_mousedown(e,panel,rb,'rb');
        })
    }
    Resizable('ui-Resizable');
</script>