使用 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;
       }
    });

使用 jquery 在堆叠的 div 之间拖动水平条

horizontal bar drag between stacked divs using jquery

html

css

jquery

height

draggable