javascript - 两个区域的垂直可拖动分区

我想对两个区域进行垂直可拖动的划分，如下所示。


我只想将可拖动div的online example修改为我想要的。最后，我得到了this。有人可以给我一些修改建议吗？

JSFiddle链接:https://jsfiddle.net/casperhongkong/omekvtka/14/

HTML

<div class="container">
  <div class="area1">
Area 1
  </div>
  <div class="drag">

  </div>
  <div class="area2">
Area 2
  </div>
</div>

CSS

.container {
  position: fixed;
  top: 51px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #272822;
  border: 1px solid #222;
 // margin: 0 auto;
  //display: inline-block;
}

.area1 {
  position: absolute;
  height: 100%;
  width: 30%;
  background-color: #ddd;
  display: inline-block;
}

.drag {
  position: fixed;

  width: 5px;
  height: 100%;
  background-color: #444;
  display: inline-block;
}

.area2 {
  position: absolute;
  right: 0;
  height: 100%;
  width: 30%;
  background-color: #ddd;
  display: inline-block;
}

JavaScript

$(document).ready(function() {

  $('.drag').on('mousedown', function(e) {
    var $area1 = $('.area1'),
        $area2 = $('.area2'),
        startWidth_a1 = $area1.width(),
        startWidth_a2 = $area2.width(),
        pX = e.pageX;

    $(document).on('mouseup', function(e) {
      $(document).off('mouseup').off('mousemove');
    });

    $(document).on('mousemove', function(me) {
      var mx = (me.pageX - pX);
      $area1.css({
        width: startWidth_a1 - mx;
      });
      $area2.css({
        //left: mx / 2,
        width: startWidth_a2 - mx,
        //top: my
      });
    });

  });
});

最佳答案

对于javascript，我建议您 check out 一个库，因为这比几行要复杂得多。 @fauxserious给了Split.js一个很好的例子。

如here所述，这在纯HTML/CSS中是有可能的，尽管有一些限制。

HTML:

<div class="split-view">
    <div class="resize-x panel" style="width: 216px;">
      Panel A
    </div>
    <div class="panel">
      Panel B
    </div>
</div>

CSS:

/* Panels: */
.panel{
    padding: 1em;
    border-width: 6px;
    border-style: solid;
    height: 4em;
}

/* Resizing */
.resize-x {
    resize: horizontal;
    overflow: auto;
}

/* Split View */
.split-view {
    margin: 1em 0;
    width: 100%;
    clear: both;
    display: table;
}

.split-view .panel {
    display: table-cell;
}

关于javascript - 两个区域的垂直可拖动分区，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34472704/