Question

我试图将100％高度div垂直划分为拖动边框。这是我目前所拥有的一个小提琴：http://jsfiddle.net/k5rtbzs5/

HTML是：

<div class="column">
  <div class="top">
      test
  </div>

    <div class="slider"></div>

  <div class="bot">
      test
  </div>
</div>

CSS是：

html {
    height: 100%;
    width: 100%;
}

body {
    height: 100%;
}

.column {
    width: 100%;
    height: 100%;
    border: solid #000;
}

.top {
    width: 100%;
    height: 50%;
    background-color: #989898;
}

.bot {
    width: 100%;
    height: 50%;
    background-color: #686868;
}

.slider {
    width: 100%;
    height: 10px;
    background-color: #000;
}

如何让div =“slider”能够通过拖动来改变div =“top”和div =“bot”的高度？我也试图将div =“column”保持为浏览器窗口的完整高度。

由于

Answer 1

您可以使用mousemove事件使用jquery更改顶部和底部div的高度。这是jquery代码：

$(document).ready(function(){
  $('.slider').on('mousedown',function(e){
    $('.column').on('mousemove',function(e){
        diff = $('.slider').offset().top + 5 - e.pageY ;
        $('.top').height($('.top').height()-diff);
        $('.bot').height($('.bot').height()+diff);
    });
  });
  $('.column').on('mouseup',function(){
      $('.column').off('mousemove');
  });
});

jsfiddle: http://jsfiddle.net/ndud4ff7/

如何制作拖动条来改变垂直高度？

1 个答案: