JSFiddle - React, Tailwind, and code Playground

by sandeeprajoria

HTML

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
        
    </head>
    <body>
        <div id="container">
            <div id ="dynamic-container">
                <div id ="marker"></div>
                <div id ="innerCircle"></div>
            </div>                
        </div>    
    </body>

</html>

CSS

div#dynamic-container{width:400px; height:400px; background-color: lightgoldenrodyellow; position:relative; border: 1px solid black;}
            div#innerCircle{width: 380px; height: 380px; position: absolute; left: 10px; top:10px; background-color: lightcoral;
                            border-radius:190px; -moz-border-radius: 190px; -webkit-border-radius: 190px;}           
            div#marker{width: 10px; height:10px; background: black; position:absolute; left:195px; cursor: crosshair;
                        -moz-transform:rotate(45deg);
                        -moz-transform-origin:5px 200px;
                        
                        transform:rotate(45deg);
                        transform-origin:5px 200px;                          

                        -ms-transform:rotate(45deg);
                        -ms-transform-origin:5px 200px;                                
                        
                        -webkit-transform:rotate(45deg);
                        -webkit-transform-origin:5px 200px;                       
            
                        z-index:17;
            }

JavaScript

function rotateAnnotationCropper(offsetSelector, xCoordinate, yCoordinate, cropper){
                    //alert(offsetSelector.left);
                
                    var x = xCoordinate - offsetSelector.offset().left - offsetSelector.width()/2;
                    var y = -1*(yCoordinate - offsetSelector.offset().top - offsetSelector.height()/2);
                    var theta = Math.atan2(y,x)*(180/Math.PI);        


                    var cssDegs = convertThetaToCssDegs(theta);
                    var rotate = 'rotate(' +cssDegs + 'deg)';
                    cropper.css({'-moz-transform': rotate, 'transform' : rotate, '-webkit-transform': rotate, '-ms-transform': rotate});
                    $('body').on('mouseup', function(event){ $('body').unbind('mousemove')});

            }
            
            function convertThetaToCssDegs(theta){
                var cssDegs = 90 - theta;
                return cssDegs;
            }
            
            $(document).ready(function(){               
                
                $('#marker').on('mousedown', function(){
                    $('body').on('mousemove', function(event){
                        rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $('#marker'));    
                    });
                                        
                });                    
            });