使用jquery在堆疊的div之間進行水平條間拖拽

Question

所以我有兩個上下彼此的div。最上面的是內容區域，下面的內容是關於內容的備註部分。我想在兩個div之間放一個看不見的欄，我可以拖動兩個div的高度。如果可能的話，我也想拍到頂部或底部。

我會附上一個當前外觀的例子，但只要這些類在html中保持不變，設計就可以改變。任何幫助讚賞。謝謝！

jsfiddle.net/jv4edcc4/ 

Answer 1

試試這個 - 代碼很簡單，你可以檢查它是如何工作在這裏 - http://jsfiddle.net/Bek9L/3142/

HTML：

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

CSS：

body,html{width:100%;height:100%;padding:0;margin:0;} 
.clearfix { 
    height: 100%; 
} 
.clearfix:after { 
    content: ''; 
    display: table; 
    clear: both; 
} 
#main{ 
    background-color: BurlyWood; 
    height: 50%; 
    width: 100%; 
} 
#sidebar{ 
    background-color: IndianRed; 
    width:100%; 
    height:50%; 
    overflow-y: hidden; 
    position: relative; 
} 

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

和JS（用了jQuery ）：

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

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

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

    }); 

    $(document).mouseup(function(e){ 
     if (dragging) 
     { 
      var percentage = (e.pageY/window.innerHeight) * 100; 
      var mainPercentage = 100-percentage; 

      //$('#console').text("side:" + percentage + " main:" + mainPercentage); 

      $('#sidebar').css("height",percentage + "%"); 
      $('#main').css("height",mainPercentage + "%"); 
      $('#ghostbar').remove(); 
      $(document).unbind('mousemove'); 
      dragging = false; 
     } 
    });