当调整框的大小时调整左边的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

你的问题不清楚给我。如果你想点击调整大小按钮后调整其大小的盒子，请逐一回答：

$(function(){ 

// Bind the resize event. When any test element's size changes, update its 
// corresponding info div. 

$('.test').resize(function(){ 

var elem = $(this); 
// Update the info div width and height - replace this with your own code 

// to do something useful! 

elem.closest('.container').find('.info') 

.text(this.tagName + ' width: ' + elem.width() + ', height: ' + elem.height()); 
11. 
}); 

// Update all info divs immediately. 

$('.test').resize(); 
// Add text after inline "add text" links. 

$('.add_text').click(function(e){ 

e.preventDefault(); 

$(this).parent().append(' Adding some more text, to grow the parent container!'); 

}); 
// Resize manually when the link is clicked, but only for the first paragraph. 

$('.add_text:first').click(function(){ 

$(this).parent().resize(); 

}); 

}); 

Answer 2

有专用于调整元素的jQueryUI的功能： http://jqueryui.com/resizable/

编辑

我偶然发现一个问题，一个答案有一个我认为你正在寻找的演示。

三个事件函数来做到这一点：

$('.handle').on('mousedown', function(e){ 
    isDragging = true; 
    sPos = e.pageX; 
    handle = $(this); 
    tWidth = handle.prev().width() + handle.next().width(); 
}); 

$(window).on('mouseup', function(e){ 
    isDragging = false; 
}); 

$('.container').on('mousemove', function(e){ 
    var cPos = sPos - e.pageX; 
    if(isDragging && ((tWidth - handle.next().width()) - cPos) <= tWidth){ 
     handle.prev().width((tWidth - handle.next().width()) - cPos); 
     handle.next().width(tWidth - handle.prev().width()); 
     sPos = e.pageX; 
    } 
}); 

这里是jsfiddle demo

这里是我指的答案：https://stackoverflow.com/a/32658723/1071742

Answer 3

下面就可以是你的答案。

<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>