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() {
    function coords(event, element) {
      function a(width) {
        var l = 0, r = 200;
        while (r - l > 0.0001) {
          var mid = (r + l) / 2;
          var a = document.createElement('div');
          a.style.cssText = 'position: absolute;left:0;top:0;background: red;z-index: 1000;';
          a.style[width ? 'width' : 'height'] = mid.toFixed(3) + '%';
          a.style[width ? 'height' : 'width'] = '100%';
          element.appendChild(a);
          var x = document.elementFromPoint(event.clientX, event.clientY);
          element.removeChild(a);
          if (x === a) {
            r = mid;
          } else {
            if (r === 200) {
              return null;
            }
            l = mid;
          }
        }
        return mid;
      }
        var l = a(true),
            r = a(false);
        return (l && r) ? {
            x: l,
            y: r
        } : null;
    }

    var convertCoordinates = function(event, element) {
        if(typeof webkitConvertPointFromNodeToPage === "function") {
            return webkitConvertPointFromPageToNode(
                $(element)[0],
                new WebKitPoint(event.pageX, event.pageY)
            );
        } else {
            var result = coords(event, $(element)[0]);
            if(!result) {
                return {x: null, y: null};
            }
            result.x *= $(element).width() / 100;
            result.y *= $(element).height() / 100;
            return result;
        }
    }
                      
    $("#inner" ).draggable();
    $("#outer").rotate(40);
               
    $('#inner').bind('drag', function(event, ui){
       var point = convertCoordinates(event, $("#outer"));

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