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)
       );
      var angle = - 40 * Math.PI / 180;
var cosAngle = Math.cos(angle);
var sinAngle = Math.sin(angle);
var relativeX = (this.x * cosAngle) - (this.y * sinAngle);
var relativeY = (this.x * sinAngle) + (this.y * cosAngle);

       ui.position.left =relativeX;
       ui.position.top = relativeY;     
    });          
});