Resizable frame

by Malin Jayakody

HTML

<section class="container">
   <div class="frame"></div>
</section>

CSS

.container {
   margin: 0;
   width: 500px;
   height: 500px;
   background-color: #fff;
   position: relative;
}

.frame {
   height: 100px;
   width: 150px;
   border: 1px solid #ccc;
   padding: 0;
   margin: 0;
   top: 100px;
   left: 100px;
   position: absolute;
}

.handle-position {
   position: absolute;
}

.handle-position .handle {
   width: 11px;
   height: 11px;
   border: 1px solid #000;
   background-color: #ccc;
   position: absolute;
   top: -6px;
   left: -6px;
}

.handle-position[data-orientation="nw"] {
   top: -1px;
   left: -1px;
   cursor: nwse-resize;
}

.handle-position[data-orientation="ne"] {
   top: -1px;
   right: 0;
   cursor: nesw-resize;
}

.handle-position[data-orientation="se"] {
   bottom: 0;
   right: 0;
   cursor: nwse-resize;
}

.handle-position[data-orientation="sw"] {
   bottom: 0;
   left: -1px;
   cursor: nesw-resize;
}

.handle-position[data-orientation="top"] {
   top: -1px;
   left: 50%;
   cursor: ns-resize;
}

.handle-position[data-orientation="right"] {
   top: 50%;
   right: 0;
   cursor: ew-resize;
}

.handle-position[data-orientation="bottom"] {
   bottom: 0;
   left: 50%;
   cursor: ns-resize;
}

.handle-position[data-orientation="left"] {
   top: 50%;
   left: -1px;
   cursor: ew-resize;
}

JavaScript

;
'use strict';
(function($, document, undefined) {
   var resizing = undefined;

   $.fn.addResizeEventHandlers = function() {
      return this.each(function() {
         var frame = $(this);
         frame.on({
            'mousedown': function(e) {
               e.stopPropagation();
               if (!resizing) {
                  resizing = $(this);
                  resizing.data({
                     pageX: e.clientX,
                     pageY: e.clientY,
                     width: frame.width(),
                     height: frame.height(),
                     top: frame.offset().top,
                     left: frame.offset().left
                  });
               }
            },
            'mousemove': function(e) {
               //e.stopPropagation(); Find a way to stop this event when out of bounds
            }
         }, '.resize');

         $('.container').on('mousemove', function(e) {
            e.preventDefault();
            if (resizing) {
               var data = resizing.data();
               var orientation = data.orientation;
               var dimension = 'height';
               if (orientation == 'left' || orientation == 'right') {
                  dimension = 'width';
               }
               var offset = 0;
               var fixedSide = undefined;
               switch (orientation) {
                  case 'top':
                     offset = data.pageY - e.clientY;
                     fixedSide = orientation;
                     break;
                  case 'right':
                     offset = e.clientX - data.pageX;
                     break;
                  case 'bottom':
                     offset = e.clientY - data.pageY;
                     break;
                  case 'left':
                     offset = data.pageX - e.clientX;
                     fixedSide = orientation;
                     break;
               }
               if (fixedSide) {
                  var preset = 0;
          ...