JSFiddle - React, Tailwind, and code Playground

by index

HTML

<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://rawgit.com/godswearhats/jquery-ui-rotatable/master/jquery.ui.rotatable.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css">
<script src="https://rawgit.com/unlocomqx/jQuery-ui-resizable-rotation-patch/master/resizable-rotation.patch.js"></script>
<div id="test">
    <div id="foo"></div>
</div>

<div id="another">
    <div id="boo"></div>
</div>

CSS

.ui-rotatable-handle {
    background-image: url('https://raw.githubusercontent.com/godswearhats/jquery-ui-rotatable/master/rotate.png');
    background-size: 100%;

    height: 16px;
    width: 16px;
    cursor: pointer;
    left: 50%;
    bottom: -35px;
    position: absolute
}
.ui-rotatable-display {
    position: absolute;
    left: 60%;
    bottom: -35px;
    color: #ABABAB;
    font-size: 10px;
}

#test {
    position: absolute;
    left: 75px;
    top: 75px;
    width: 200px;
    height: 50px;
}
#test > #foo {
    height: 50px;
    width: 200px;
    background-color: #494949;
    border: 5px solid #000;
    border-radius: 8px;
}

#another {
    position: absolute;
    left: 75px;
    top: 75px;
    width: 200px;
    height: 50px;
    transform: rotate(1rad);
}
#another > #boo {
    height: 50px;
    width: 200px;
    background-color: #55acee;
    border: 5px solid #3388ff;
    border-radius: 8px;
}

JavaScript

$(document).ready(function() {
    $('#test, #another').draggable()
    $('#test, #another').resizable({
            handles: 'all'
        })
    $('#test, #another').rotatable({
            rotationCenterX: 50.0, 
            rotationCenterY: 50.0,
            step: 45,
            start: function(event, ui) {
                $('<div class="ui-rotatable-display">').insertAfter('.ui-rotatable-handle');
            }, rotate: function(event, ui) {
                var currentRadians = $(ui.element).data('ui-rotatable').elementCurrentAngle;
                var currentDegrees = currentRadians * (180 / Math.PI);
    
                if (currentDegrees < 0)
                    currentDegrees += 360;

                console.log(currentDegrees);
                $('.ui-rotatable-display').html(Math.round(currentDegrees) + '°');
            }, stop: function(event, ui) {
                $('.ui-rotatable-display').remove();
            }
        });
});