JSFiddle - React, Tailwind, and code Playground

by marcgrabow

HTML

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
        <script src="http://code.jquery.com/jquery-latest.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: 200px;
    height: 200px;
    position: absolute;
    left: 100px;
    top: 100px;
    background-color: lightcoral;
    border-radius:100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}

div#marker {
    width: 100px;
    height:100px;
    background: black;
    position: absolute;
    left: 150px;
    
    -moz-transform: rotate(0);
    -moz-transform-origin: 50px 200px;
    
    transform: rotate(45deg);
    transform-origin: 50px 200px;                         

    -ms-transform: rotate(45deg);
    -ms-transform-origin: 50px 200px;                              
    
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: 50px 200px;                       

    z-index:17;
    
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default;                                                               
}

.mouseDown {
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}

JavaScript

function rotateAroundCircle(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
    });
    //alert('x: ' + x + '    y: ' + y + '   theta: ' + theta + '   cssDegs: ' + cssDegs);                
    $(document).on('mouseup', function(event) {
        cropper.removeClass("mouseDown");
        $(document).off('mousemove');
    });

}

function convertThetaToCssDegs(theta) {
    var cssDegs = 90 - theta;
    return cssDegs;
}

$(document).ready(function() {

    $(document).on('mouseup', function(event) {
        $('body').removeClass("mouseDown");
    });

    $('#container').on('mousedown', '#marker', function(event) {

        event.preventDefault();
        $(this).addClass("mouseDown");
        $('body').addClass("mouseDown");

        $(document).on('mousemove', function(event) {
            rotateAroundCircle($('#innerCircle').parent(), event.pageX, event.pageY, $('#marker'));
        });

    });
});