Resize a div from two ends

Question

I am making a div resizer and cannot use any plugin as I need to customize many things on it's basis. I have achieved the task to resize the div from right side. In this I am manipulating the drag and calculating the units accordingly.

This script works fine if I keep the drag limited to right side. But now my task is to resize it on both ends. I understand that some technique would be applied.

One technique I am trying to apply is the half the div and notice the distance from that center point e.g if the center is 200px and the mouse is at 10px then we can start decreasing the div from right and vice-versa.

var handle, measurement, isResizing;
var pageWidth = $(window).width();
var maxUnit = 300;
var minUnit = 50;
var maxLimit;
var adjustment = 0;
var container;

function calculateUnit(maxUnit, maxLimit, currentWidth) {
  var offset = maxLimit - currentWidth;
  return Math.ceil(maxUnit - offset);
}

function adjustContainer(innerContainerWidth, widthDiff, heightDiff) {
  handle.css({
    'width': (innerContainerWidth - widthDiff) + 'px',
    'left': (widthDiff / 2) + 'px',
    'top': (heightDiff / 2) + 'px'
  });
}

function InitSizeCalculator() {
  container = $("#topDrag");
  console.log('height c', container.height());
  //console.log('width c', container.width());
  handle = $('#drag'), measurement = document.getElementById('measurement'), isResizing = false;
  var heightDiff = container.height() - 170;
  var widthDiff = container.width() - handle.width();
  console.log('height c', heightDiff);
  //maxLimit = (pageWidth <= 720) ? (pageWidth - 20) : (pageWidth - (pageWidth / 3)) - 60;
  maxLimit = container.width();
  adjustContainer(handle.width(), widthDiff, heightDiff);
  //handle.css('width', maxLimit);

  measurement.innerHTML = maxUnit + ' m';
}
InitSizeCalculator(); //initialize the variable first 
handle.on('mousedown touchstart', function(e) {
  isResizing = true;
  lastDownX = e.clientX;
});

$(document).on('mousemove touchmove', function(e) {
    var currentWidth = e.clientX - adjustment;
    console.log(e.clientX);
    // we don't want to do anything if we aren't resizing.
    var unit = calculateUnit(maxUnit, maxLimit, currentWidth);
    if (!isResizing || unit < minUnit || e.clientX > maxLimit)
      return;
    handle.css('width', currentWidth);
    measurement.innerHTML = unit + ' cm';
  })
  .on('mouseup touchend', function(e) {
    // stop resizing
    isResizing = false;
  });
//start

.imgContainer-p {
  position: relative !important;
  border-right: black 1px dashed;
  border-left: black 1px dashed;
  cursor: w-resize;
  height: 220px
}
#drag {
  position: absolute;
  /*right: 500px;*/
  top: 0;
  bottom: 0;
  /*width: 500px;*/
}
.imgWinder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /*height: 200px;*/
  height: 90%;
}
.imgPaper {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  /*height: 200px;*/
  height: 90%;
}
.measurment-p {
  width: 100%;
  height: 20px;
  border-bottom: 1px dashed black;
  border-left: 1px dashed black;
  border-right: 0px dashed black;
  padding-top: 10px;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-9 col-sm-12" id="topDrag">
  <div class="imgContainer-p" id="drag">
    <img id="imgWinder" class="imgWinder" draggable="false" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Cylinder_geometry_rotated.svg/2000px-Cylinder_geometry_rotated.svg.png" />


    <div style="width: 100%; height: 20px; border-bottom: 1px dashed black; border-left: 1px dashed black; border-right: 0px dashed black; padding-top: 10px; text-align: center">
      <span style="background-color: #FFFFFF; padding: 0 10px;">
                                    <span class="label label-default">Size</span>
      <span class="label label-warning" id="measurement">01</span>

      <!--Padding is optional-->
      </span>
    </div>

  </div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

1. When you drag an element from the right side to expand it, you're effectively updating the the right position of the element by adding the number of pixels covered in the drag action to its width.

2. This is how elements behave in a browser - left to right and hence similar to increasing width using CSS. But when you drag the opposite side of it, meaning the left hand side, the browser doesn't know how to handle this.

3. Now since you're resizing an element to the left hand side, you have space there, and the left edge of the element moves to a new position in that space, but you can't add width to the left. So, you have to give an illusion of it being added to the left hand side, by maintaining the right edge at its current position.

4. When you drag the element's left edge towards the left, calculate the difference between its old left position and its new left position, and add it to the width of the element. This will make sure the width expands to fit the new displacement.

5. When you drag the left edge towards the right side, to shrink the element, do the same procedure, except reduce it from the total width instead of adding it.

6. When you drag the right side towards the left, hence reducing the resize, calculate the difference and reduce it from the width.

This should help you with the code:

Adjust a div's height/width by dragging its left/top border without jQuery draggable?