JSFiddle - React, Tailwind, and code Playground

by wtkd

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.js"></script>
<span id="display">0</span>

<div id="stage">
    <div id="center"></div>
    <div id="rotateme"></div>
</div>

CSS

#stage{
    position:relative;
    width:500px;
    height:500px;
    border:solid 1px #000;
    margin:10px;
    cursor:pointer;
}

#center{
    position:absolute;
    
    top:50%;
    left:50%;
    margin-top:-2px;
    margin-left:-2px;
    background:#000;
    width:4px;
    height:4px;
}

#rotateme{
    width:300px;
    height:100px;
    border:solid 1px #000;
    z-index:-1;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-150px;
    margin-top:-50px;
}

JavaScript

var dragging = false, startpoint, endpoint, midpoint = $("#center").position();
midpoint = {x:midpoint.left - 2, y:midpoint.top-2};

$("#stage").mousedown(function(e){
    dragging = true;
    startpoint = {x:e.offsetX, y:e.offsetY};
    $('#rotateme').data("deg",0);
});

$("#stage").mouseup(function(e){
    dragging = false;
});

$("#stage").mousemove(function(e){
    if (dragging){
        var angle = 0, sp = startpoint, mp = midpoint;
        var p = {x:e.offsetX, y:e.offsetY};
        var sAngle = Math.atan2((sp.y-mp.y),(sp.x - mp.x));
        var pAngle = Math.atan2((p.y-mp.y),(p.x - mp.x));        

        angle = (pAngle - sAngle) * 180/Math.PI;
        
        
        $('#rotateme').data("deg", $('#rotateme').data("deg")+angle);
        $("#display").text($('#rotateme').data("deg"));
        $('#rotateme').css({ rotate: '+=' + angle });
        if(parseInt($('#rotateme').data("deg")+angle)>=0&&$('#rotateme').data("deg")<0){
            $("#display").text("360");
        }
        startpoint = {x:p.x, y:p.y};
    }
});