JSFiddle - React, Tailwind, and code Playground

HTML

<div class="draggable_wp">
    <div class="el"></div>
    <div class="handle"></div>
</div>

CSS

.draggable_wp{
    position: absolute;
    left: 150px;
    top: 150px;
}

.el{
    width: 25px;
    height: 50px;
    background-color: yellow;
}
.handle{
    position: absolute;
    left:0;
    top:-75;
    width: 25px;
    height: 25px;
    background-color: blue;
}

JavaScript

$(function() {
    var dragging = false, target_wp;   
    $('.handle').mousedown(function(e) {
        var o_x = e.pageX, o_y = e.pageY; // origin point
        e.preventDefault();
        e.stopPropagation();
        dragging = true;
        target_wp=$(e.target).closest('.draggable_wp');
        
        $(document).mousemove(function(e) {
            if (dragging) {
                var s_x = e.pageX, s_y = e.pageY; // start rotate point
                if(s_x !== o_x && s_y !== o_y){ //start rotate
                    var s_rad = Math.atan2(s_y, s_x);
                    var degree = (s_rad * (360 / (2 * Math.PI)));
                    target_wp.css('-moz-transform', 'rotate(' + degree + 'deg)');
                    target_wp.css('-moz-transform-origin', '50% 50%');
                    target_wp.css('-webkit-transform', 'rotate(' + degree + 'deg)');
                    target_wp.css('-webkit-transform-origin', '50% 50%');
                    target_wp.css('-o-transform', 'rotate(' + degree + 'deg)');
                    target_wp.css('-o-transform-origin', '50% 50%');
                    target_wp.css('-ms-transform', 'rotate(' + degree + 'deg)');
                    target_wp.css('-ms-transform-origin', '50% 50%');
                }
            }
        })
        $(document).mouseup(function() {
            dragging = false
        })
    })// end mousemove
})