JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div id="test">---</div>
</div>

CSS

div.container {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
}

div#test {
    width: 20px;
    height: 20px;
    top: 0px;
    left: 0px;
    background-color: yellow;
}

.rot {
    
}

JavaScript

$(function(){
    var lastPos = 0, rotate = 0, isMouseDown = false;
        
    $('.container').draggable();
    
    $('#test').bind('mousedown', function(e){
        isMouseDown = true;
        e.stopPropagation();
    });
    
    $(document.body).bind('mouseup', function(){
        isMouseDown = false;
    }).bind('mousemove', function(e){
        if(isMouseDown){
            if(e.pageX > lastPos)
               rotate+=4;
            else 
               rotate-=4;
        
            lastPos = e.pageX;
            $('.container')[0].style.webkitTransform = this.style.MozTransform  = "rotate(" + rotate + "deg)";
        }
    });
});