JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<div id="outer" >
 
        <div id = "inner">
        </div>
        
        <div id="point">
        </div>

</div>

CSS

#outer
{
    background-color:#666;
    
    position:relative;
    width:400px;
    height:300px;
    top:100px;
    left:100px;
}

#inner
{
  position:relative;
  width:100px;
  height:50px;
  background-color:#CCC;
 
  top: 0px;
  left:0px;
  
 
}
#point
{
  position:absolute;
  width:10px;
  height:10px;
  background-color:#930;
 
  top:0px;
  left:0px;
  
 
}

JavaScript

$(document).ready(function() {
                      
           $("#inner" ).draggable();
           $("#outer").rotate(40);
               
    $('#inner').bind('drag', function(event, ui){
       var point = webkitConvertPointFromPageToNode(
           document.getElementById("outer"),
           new WebKitPoint(event.pageX, event.pageY)
       );

       ui.position.left = point.x;
       ui.position.top = point.y;           
    });          
});