Drag to resize - example

by Lio Fleishman

HTML

<div id="container">
  <div id="left_panel"> left content! </div>
  <div id="right_panel">
    <div id="drag"></div> right content!
  </div>
</div>

CSS

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100%;
}

#left_panel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 100px;
  background: hotpink;
}

#right_panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  color: #fff;
  background: lightblue;
}

#drag {
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: w-resize;
}

JavaScript

var isResizing = false,
  lastDownX = 0;

$(function() {
  var container = $('#container'),
    left = $('#left_panel'),
    right = $('#right_panel'),
    handle = $('#drag');

  handle.on('mousedown', function(e) {
    isResizing = true;
    lastDownX = e.clientX;
  });

  $(document).on('mousemove', function(e) {
    // we don't want to do anything if we aren't resizing.
    if (!isResizing)
      return;

    var offsetRight = container.width() - (e.clientX - container.offset().left);

    left.css('right', offsetRight);
    right.css('width', offsetRight);
  }).on('mouseup', function(e) {
    // stop resizing
    isResizing = false;
  });
});