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

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

JavaScript

function getDistance(x1,y1,x2,y2){
    return Math.sqrt((x1-x2) * (x1-x2) + (y2-y1) * (y2-y1));
}
function get
var div = $("#mydiv");
var rotation = 0; 
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;   
        rotation += getDistance(curX,curY,lastX,lastY); 
        var rotateCSS = 'rotate(' + rotation + 'deg)';
        $(this).css({
            '-webkit-transform': rotateCSS
        });  
        lastX = curX;
        lastY = curY;
    }
})