JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<script src="https://code.angularjs.org/1.3.0/angular.min.js"></script>
<h2>Drag the box</h2>
<div class="elements-map" ng-controller="ElementsMapController as emCtrl">
    <input type="text" ng-model="emCtrl.test.left" />
    <input type="text" ng-model="emCtrl.test.top" />
    <div class="map-element" fm-space-state fm-draggable space-model="emCtrl.test"></div>
</div>

CSS

.elements-map {
    width: 30em;
    height: 15em;
    border: 1px solid #333;
    position: relative;
}

.map-element {
    background-color: #00f;
    border: 1px solid #000;
    position: absolute;
}

JavaScript

(function(){
    var app = angular.module('app', []);
    app.controller('ElementsMapController', function(){
        this.initialise = function() {
            //sample data
            this.test = {
                width: 2,
                height: 20,
                top: 50,
                left: 40,
                units: {
                    width: {
                        unit: 'em',
                        unit2px: 14
                    }
                }
            };
        };
        this.initialise();
    });
    
    /**
     * Services
     */
    app.factory('fmModelSpaceStateMap', function(){
        var map = function() {
            
            this.getMultiplayer = function(model, dimension) {
                var hasMultiplayer = model.units && model.units[dimension] && model.units[dimension].unit2px;
                return hasMultiplayer ? parseFloat(model.units[dimension].unit2px) : 1;
            };

            this.getUnit = function(model, dimension) {
                var hasUnit = model.units && model.units[dimension] && model.units[dimension].unit;
                return hasUnit ? model.units[dimension].unit : 'px';
            };

            /**
             * Returns the size in pixels from model.
             * 
             * @param object model
             * @returns object
             */
            this.getSize = function(model) {
                return {
                    width: this.getWidth(model),
                    height: this.getHeight(model)
                };
            };

            this.getWidth = function(model) {
                return parseFloat(model.width) * this.getMultiplayer(model, 'width');
            };

            this.getCssWidth = function(model) {
                return model.width + this.getUnit(model, 'width');
            };

            this.getHeight = function(model) {
                return parseFloat(model.height) * this.getMultiplayer(model, 'height');
            };

          ...