JSFiddle - React, Tailwind, and code Playground

by mgibsonbr

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 h_x = e.pageX, h_y = e.pageY; // clicked point
        e.preventDefault();
        e.stopPropagation();
        dragging = true;
        target_wp=$(e.target).closest('.draggable_wp');
        if ( !target_wp.data("origin") )
            target_wp.data("origin", { left:target_wp.offset().left,
                                       top:target_wp.offset().top    });
        var o_x = target_wp.data("origin").left, 
            o_y = target_wp.data("origin").top; // origin point
        
        $(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 - o_y, s_x - o_x); // current to origin
                    s_rad -= Math.atan2(h_y - o_y, h_x - o_x); // handle to origin
                    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
})