jquery - 如何通过将 div 拖到顶部来调整它的大小？

Question

我想在拖动两个 div 之间的部分时调整 div 的大小。

在搜索中我找到了 this但我不知道如何使这个水平而不是可用的垂直拖动？

我的 div 看起来像，

<div id="widnow">
<div id="button">-</div>
    <div id="title_bar"><b>Console Log</b></div>
    <div id="box">${logs}</div>
</div>

我希望标题栏可以垂直拖动。

我不想使用任何第三方插件。

Answer 1

我已经修改了你的代码:
此外，这是一个 Fiddle DEMO
HTML:

<div id="sidebar">
  <span id="position"></span>
  sidebar
</div>
<div id="dragbar"></div>
<div id="main">main</div>

CSS:

body,html{width:100%;height:100%;padding:0;margin:0;}
#main{
  background-color: BurlyWood;
  float: left;
  height:100px;
  right: 0;
  width: 100%;    
}
#sidebar{
  background-color: IndianRed;  
  width:100%;
  float: left;
  height:100px;
  overflow-y: hidden;
}

#dragbar{
  background-color:black;
  height:5px;
  float: left;
  width: 100%;
  cursor: row-resize;
}
#ghostbar{
  width:3px;
  background-color:#000;
  opacity:0.5;
  position:absolute;
  cursor: col-resize;
  z-index:999
}

JavaScript 代码:

var i = 0;
var dragging = false;
$('#dragbar').mousedown(function(e){
  e.preventDefault();

  dragging = true;
  var main = $('#main');
  var dragbar = $("#dragbar");
  var ghostbar = $('<div>',
    {id:'ghostbar',
        css: {
          height: dragbar.outerHeight(),
          width: dragbar.outerWidth(),
          top: main.offset().top,
          bottom: main.offset().bottom
        }
   }).appendTo('body');

   $(document).mousemove(function(e){
     ghostbar.css("top",e.pageY+2);
   });
});

$(document).mouseup(function(e){
  if (dragging){
    $('#sidebar').css("height",e.pageY+2);
    $('#main').css("top",e.pageY+2);
    $('#ghostbar').remove();
    $(document).unbind('mousemove');
    dragging = false;
  }
});