JSFiddle - React, Tailwind, and code Playground

by megawes

HTML

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/jquery.ui.rotatable.min.js"></script>
<div id="container">
  <div id="containment">
    <div id="circle"></div>
  </div>
</div>

CSS

#container{width:100px;
           height:140px;
           background:#FFEB3B;
           position:absolute;
           top:50%;
           bottom:50%;
           margin-top:-70px;
           margin-right:-50px}

.ui-rotatable-handle {
            height: 30px;
            width: 30px;
            cursor: pointer;
            background:#ff0000;
            border-radius:50%;
            right: -15px;
            bottom: -15px;
            position:absolute;
            z-index:1}

#containment{width:30px;
             height:190px;
             position:absolute;
             bottom:70px;
             left:35px;
             border:solid 1px #000}
             
#circle{     width:30px;
             height:30px;
             position:absolute;
             top:0;
             left:0;
             border-radius:50%;
             background:#3F51B5}

JavaScript

$(function(){

$('#container').draggable().rotatable();
$('#circle').draggable({containment: $('#containment')
});

});