JSFiddle - React, Tailwind, and code Playground

by Trufa

HTML

<script src="https://rawgit.com/gtramontina/draggable.js/master/draggable.js"></script>
<div ng-app="myApp">
    <div ng-controller="ExampleController">
        <div scale-transform id="rect"></div>
        <ex></ex>
    </div>
</div>

CSS

#rect{
    width: 200px;
    height: 150px;
    outline: 1px solid red;
    position: relative;
    margin-left: 0px;
}

#scaling-handle{
    position: absolute;
    bottom: 0;
    right: 0;
}

JavaScript

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

myApp.controller('ExampleController', function($scope) {
    $scope.example = "hi";
});

myApp.directive('scaleTransform', function() {
    return {
        template: '<div id="scaling-handle">x</div>',
        restrict: 'A',
        link:function(scope, el, attr) {
            var element = el[0];
            var _updatePosition = function(type) { return function(event) {
                _scaleElement({
                    "x": event.x,
                    "y": event.y
                });
                //console.log(event.x);
            }};
            var _scaleElement = function(handle){
                var parentPosition = element.getBoundingClientRect();
                console.log("new Delta x", handle.x - parentPosition.left);
            };
            
            var handle = document.getElementById("scaling-handle");
            
            draggable(handle);
            handle.whenDragging(_updatePosition("drag"));
          }
    };
});