JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<div class="container outer" data-angle="45">A (45&deg;)
    <div class ="draggable inner">(A) 
</div>

CSS

.container 
{
    background-color:#CF3;
    width:400px;
    height:200px;
    top:50px;
    left:100px;
    position:relative;
    font-size: 11px;
}
.outer2 {
    width:150px;
    height:150px;
    top:50px;
    left: 50px;
    background-color:red;
}

.outer3 {
    top:50px;
    left: 50px;
    background-color:cyan;
}
.inner
{
  position:absolute;
  width:100px;
  height:50px;
  background-color:#CCC;
 
  top: 30px;
  left:30px;
}

.point{width:10px;
  height:10px;
  background-color:#930;
    position:absolute;
display: none;

}

JavaScript

$(document).ready(function() {
    $(".container").each(function() {
        var j = $(this).height() / 2;
        var k = $(this).width() / 2;
        this.angle = $(this).data("angle");
        this.containment = $(this).data("containment");

        var center = {
            top: $(this).offset().top + j,
            left: $(this).offset().left + k
        };

        $(this).parents(".container").each(function() {
            center = (this.calcPoint != null) ? this.calcPoint(center) : center;
        });

        this.transformOffset = function(offset) {
            var tAngle = -this.angle;

            $(this).parents(".container").each(function() {
                tAngle = (this.angle != null) ? tAngle - this.angle : tAngle;
            });
           var transform = transformOffset(center, offset, tAngle, j, k);
            return transform;
        };

        this.calcPoint = function(point) {
            return rotate(center, point, this.angle);
        }

        var container = this;

        var draggable = $(this).find('.draggable');

        draggable.draggable({
            /*helper: function() {
                return $(".point").first().clone().appendTo("body");
            },*/
            cursorAt: {
                top: 0,
                left: 0
            },

            start: function(event, ui) {
                ui.helper.show();
            },
            drag: function(event, ui) {
                var offset = container.transformOffset(ui.offset);
                if (container.containment) {
                    transform.top = (transform.top < 0) ? 0 : (transform.top + $(this).height() > j * 2) ? (j * 2 - $(this).height()) : transform.top;
                    transform.left = (transform.left < 0) ? 0 : (transform.left + $(this).width() > k * 2) ? (k * 2 - $(this).width()) : transform.left;
                }

                $(this).css(offset);
            }
        });

    });

    $(".container").each(function() {
       ...