JSFiddle - React, Tailwind, and code Playground

by jashwant

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<div id='mydiv'>hi &nbsp;&nbsp;&nbsp; hello
    <br /><br />
 bye &nbsp;&nbsp;&nbsp; bbye    
</div>

CSS

div {
    border-radius:80px; 
    background: red;
    padding: 50px 40px;
    width:80px;
}

JavaScript

function getAngle(x1, x2, y1, y2) {
    calcAngle = Math.atan2(x1 - x2, y1 - y2) * (180 / Math.PI);
    if (calcAngle < 0) calcAngle = Math.abs(calcAngle);
    else calcAngle = 360 - calcAngle;
    return calcAngle;
}
var div = $("#mydiv");
var isDragging = false;
div.mousedown(function(event) {
    isDragging = true;
    lastX = event.clientX;
    lastY = event.clientY;
}).mouseup(function(event) {
    isDragging = false;
}).mousemove(function(event) {
    if (isDragging) {
        var curX = event.clientX;
        var curY = event.clientY; /* dirty hack to check if its moved some distance, use distance formula instead */
        if (Math.abs(lastX - curX) < 5 || Math.abs(lastY - curY) < 5) {

            lastX = curX;
            lastY = curY;
            return;
        }
        var rotation = getAngle(curX, lastX, curY, lastY);
        var rotateCSS = 'rotate(' + rotation + 'deg)';
        $(this).css({
            '-webkit-transform': rotateCSS
        });
        lastX = curX;
        lastY = curY;
    }
})