JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="mainTarget">
<img src="http://myreaxns.com/wp-content/uploads/2013/03/priyanka-chopra-image.jpg" width="300" class="mainTarget" />
<div id="target">&nbsp;</div>
</div>

CSS

#mainTarget{
    width:300px; 
    height:200px; 
    position:relative;
    top:100px; 
    left:25%;
    -webkit-touch-callout: none;
      -webkit-user-select: none;
              user-select: none;
}

.mainTarget{position:absolute; width:300px; height:200px;}

#target{
    position:absolute;
    height:20px;
    width:20px;
    background:url(http://files.softicons.com/download/system-icons/human-o2-icons-by-oliver-scholtz/png/128x128/actions/object-rotate-left.png) no-repeat top center #ffffff;
	background-size:100%;
    cursor:pointer; 
    z-index:1; 
    top:0; 
    right:0;   
}

JavaScript

$(function() {
    var dragging = 0;
    var target     = $('#target');
    var mainTarget = $('#mainTarget');
    var elOfs = mainTarget.offset();
    var cent  = {X: mainTarget.width()/2, Y: mainTarget.height()/2};    
    var elPos = {X: elOfs.left, Y: elOfs.top};
    target.mousedown(function() {
        dragging = true;
    });
    $(document).mouseup(function() {
        dragging = 0;
    }).mousemove(function(e) {     
      if(dragging) {
         var mPos    = {X: e.pageX-elPos.X, Y: e.pageY-elPos.Y};
         var getAtan = Math.atan2(mPos.X-cent.X, mPos.Y-cent.Y);
         var getDeg  = -getAtan/(Math.PI/180) + 135; 
         mainTarget.css({transform: 'rotate(' + getDeg + 'deg)'});
      }
    });
});