Drag to resize - example

by Lio Fleishman

HTML

<div class="clearfix">
  <div id="taskbar">
    <span id="position"></span>
    <div id="dragbar"></div>
    sidebar
  </div>
  <div id="gantt">
    main
  </div>
</div>

CSS

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

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

#gantt {
  background-color: BurlyWood;
  float: right;
  height: 300px;
  width: 75%;
  max-width: 75%;
}

#taskbar {
  background-color: IndianRed;
  min-width: 25%;
  width: 25%;
  float: left;
  height: 300px;
  overflow-y: hidden;
}

#dragbar {
  background-color: black;
  height: 100%;
  float: right;
  width: 3px;
  cursor: col-resize;
}

#ghostbar {
  width: 3px;
  background-color: #000;
  opacity: 0.5;
  position: absolute;
  cursor: col-resize;
  z-index: 999
}

JavaScript

var i = 0;
var dragging = false;
$('#dragbar').mousedown(function(e) {
  e.preventDefault();

  dragging = true;
  var main = $('#gantt');
  var ghostbar = $('<div>', {
    id: 'ghostbar',
    css: {
      height: main.outerHeight(),
      top: main.offset().top,
      left: main.offset().left
    }
  }).appendTo('body');

  $(document).mousemove(function(e) {
    ghostbar.css("left", e.pageX + 2);
  });

});

$(document).mouseup(function(e) {
  if (dragging) {
    var percentage = (e.pageX / window.innerWidth) * 100;
    var mainPercentage = 100 - percentage;

    $('#taskbar').css("width", percentage + "%");
    $('#gantt').css("width", mainPercentage + "%");
    $('#ghostbar').remove();
    $(document).unbind('mousemove');
    dragging = false;
  }
});