title: Draggable Columns With Pure JavaScript
body: <p>I'm trying to build a draggable column based layout in JavaScript and having a bit of hard time with it.</p>
  
  <p>The layout comprises of 3 columns (divs), with two dragable divs splitting each. The idea is that they are positioned absolutely and as you drag the draggers, the columns' respective widths, and left values are updated.</p>
  
  <p>The three columns should always span the full width of the browser (the right most column is 100% width), but the other two should remain static by default when the browser is resized (which is why i'm using px, not %).</p>
  
  <p>My code isn't working as of yet, I'm relatively new to JavaScript (which is why I don't want to use jQuery).</p>
  
  <p>Having said that, there must be a more efficient (and cleaner) way of achieving this with less code that works (without reaching for the $ key).</p>
  
  <p>If anyone with some awesome JS skills can help me out on this I'd be super-appreciative.</p>
  
  <p>Here's the fiddle I'm working on <a href="http://jsfiddle.net/ZFwz5/3/" rel="nofollow noreferrer">http://jsfiddle.net/ZFwz5/3/</a></p>
  
  <p>And here's the code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!-- colums --&gt;
  &lt;div class="col colA"&gt;&lt;/div&gt;
  &lt;div class="col colB"&gt;&lt;/div&gt;
  &lt;div class="col colC"&gt;&lt;/div&gt;
  
  &lt;!-- draggers --&gt;
  &lt;div class="drag dragA" style="position: absolute; width: 0px; height: 100%; cursor: col-resize; left:100px;"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div class="drag dragB" style="position: absolute; width: 0px; height: 100%; cursor: col-resize; left: 300px;"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>body {
  overflow:hidden;
  }
  .col {
      position: absolute;
      height:100%;
      left: 0;
      top: 0;
      overflow: hidden;
  }
  .colA {background:red;width:100px;}
  .colB {background:green; width:200px; left:100px;}
  .colC {background:blue; width:100%; left:300px;}
  
  .drag &gt; div {
  background: 0 0;
  position: absolute;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  left: -5px;
  }
  </code></pre>
  
  <p><strong>and my terrible JavaScript:</strong></p>
  
  <pre><code>//variabe columns 
  var colA = document.querySelector('.colA');
  var colB = document.querySelector('.colB');
  var colC = document.querySelector('.colC');
  
  //variable draggers
  var draggers = document.querySelectorAll('.drag');
  var dragA = document.querySelector(".dragA");
  var dragB = document.querySelector(".dragB");
  var dragging = false;
  
  function drag() {
          var dragLoop;
          var t = this;
          var max;
          var min;
      if (dragging = true) {
  
          if (this == dragA) {
              min = 0;
              max = dragB.style.left;
          } else {
              min = dragA.style.left;
              max = window.innerWidth;
          }
  
          dragLoop = setInterval(function () {
              var mouseX = event.clientX;
              var mouseY = event.clientY;
              if (mouseX &gt;= max) {
                  mouseX = max;
              }
              if (mouseY &lt;= min) {
                  mouseY = min;
              }
              t.style.left = mouseX;
              updateLayout();
          }, 200);
      }
  }
  function updateLayout() {
          var posA = dragA.style.left;
          var posB = dragB.style.left;
          colB.style.paddingRight = 0;
  
          colA.style.width = posA;
  
          colB.style.left = posA;
          colB.style.width = posB - posA;
  
          colC.style.left = posB;
          colC.style.width = window.innerWidth - posB;
  }
  
  
  for (var i = 0; i &lt; draggers.length; i++) {
      draggers[i].addEventListener('mousedown', function () {
      dragging = true;
      });                                
      draggers[i].addEventListener('mouseup', function () {
          clearInterval(dragLoop);
          dragging = false;
      });
      draggers[i].addEventListener('mouseMove', function () {
          updateLayout();
          drag();
      });
  }
  </code></pre>