У меня есть два столбца, размер которых я бы хотел изменить (когда один становится шире, другой - уже), но я не совсем уверен, как это сделать. Я настроил эту скрипку:http://jsfiddle.net/4kyoyazq/

В данный момент у меня есть три столбца, один из которых называется «дескриптор», который расположен выше (z-index), остальные.

//left col
#content {
  position:absolute;
  left:0;
  right:250px;
  bottom:30px;
  top:50px;
  background:red;
  z-index:0;
  overflow-y:scroll;
}

//right col
#menu {
  position:absolute;
  right:0;
  top:50px;
  width:250px;
  bottom:30px;
  background:#yellow;
}

#handle {
  position:absolute;
  right:250px;
  top:50px;
  width:10px;
  bottom:30px;
  background:blue;
  cursor: col-resize;
  z-index:5;
}

Моя директива в данный момент пуста на скрипке - как я могу нацелить два столбца div в директиве, чтобы, если я перетаскиваю ручку div, я мог изменить ширину двух столбцов?

var myApp = angular.module('myApp', []);

myApp.directive("draggable", function(){
    return {
          restrict: 'A',
          link: function (scope, element, attrs) {
              element.on('click', function () {
                  //do something here
              });
          }
      };
});