title: Vertically Draggable Division of Two Areas
body: <p>I want to make a vertically draggable division of two areas like the following.
  <a href="https://i.stack.imgur.com/AC9Gt.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AC9Gt.png" alt="enter image description here"></a><a href="https://i.stack.imgur.com/xA4cX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xA4cX.png" alt="enter image description here"></a></p>
  
  <p>I just want to modify a <a href="https://jsfiddle.net/casperhongkong/omekvtka/14/" rel="noreferrer">online example</a> of draggable divs to be what I want. Finally, I got <a href="https://jsfiddle.net/casperhongkong/omekvtka/14/" rel="noreferrer">this</a>. Can someone give me some hints to modify it?</p>
  
  <hr>
  
  <p><strong>JSFiddle Link : <a href="https://jsfiddle.net/casperhongkong/omekvtka/14/" rel="noreferrer">https://jsfiddle.net/casperhongkong/omekvtka/14/</a></strong></p>
  
  <hr>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="area1"&gt;
  Area 1
    &lt;/div&gt;
    &lt;div class="drag"&gt;
  
    &lt;/div&gt;
    &lt;div class="area2"&gt;
  Area 2
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <hr>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$(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
        });
      });
  
    });
  });
  </code></pre>