JSFiddle - React, Tailwind, and code Playground

Directive Draggable/related to W H of Font

by Andrew Pougher

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  
  <div class="jumbotron" ng-controller="MainCtrl" ng-app="myApp">
		<div>{{w || 0}}:{{h || 0}}px</div>
  <h2>Resizable directive in AngularJS and jQueryUI</h2>
  <p style="font-size:{{h||10}}px">Grab Corners to resize</p>
    <div class="row">
    
<div  resizable on-resize="resize($evt, $ui)" class="panel panel-default">


  <img src="https://dummyimage.com/{{w||100}}x{{h||100}}/fff/000" width="100" height="auto" class="img-responsive"></div>
    </div>
</div>

CSS

.ui-resizable-handle {
  background: #f5dc58;
  border: 1px solid #FFF;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  z-index: 2;
  opacity: 0;
  transition: all 0.3s ease 0s;
}

.ui-resizable-handle:hover {
  opacity: 1
}

.ui-resizable-se {
  right: -8px;
  bottom: -8px;
}

/* I have customised the handles to be less obtrusive to the image */

JavaScript

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



  app.directive('resizable', function () {

    return {
        restrict: 'A',
        scope: {
            callback: '&onResize'
        },
        link: function postLink(scope, elem, attrs) {
          elem.draggable({
	    containment: "parent",
        cursor: "move",
        opacity: 0.3
      });
            elem.resizable({handles: 'all'});
            elem.on('resize', function (evt, ui) {
              scope.$apply(function() {
                if (scope.callback) { 
                  scope.callback({$evt: evt, $ui: ui }); 
                }                
              })
            });
        }
    };
  })


  app.controller('MainCtrl', function ($scope, $filter, $http) {

    $scope.resize = function(evt,ui) {
      //console.log (evt,ui);

      $scope.w = ui.size.width;
      $scope.h = ui.size.height;
    }

  });
(function () {
  'use strict';
  
  
})();