There are two problems with your approach:

1. The origin shouldn't be where the user clicked (that is the handle), but a fixed point in your div:

   
   
   

   target_wp=$(e.target).closest('.draggable_wp');
   
   //var o_x = e.pageX, o_y = e.pageY; // origin point
   
   var o_x = target_wp.offset().left,
   
       o_y = target_wp.offset().top; // origin point
   
   

   
   
   

   You will use the clicked point also, but for something else (more later):

   
   
   

   var h_x = e.pageX, h_y = e.pageY; // clicked point
   
   

   
   
   

   Finally, the origin should be fixed (i.e. should not change between rotations). One way of doing so is preserving it as a data attribute (there are other options though):

   
   
   

   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
   
   

   
   
   

   Update: One good candidate for the origin is the CSS property transform-origin, if present - it should ensure that the mouse follow the handle as closely as possible. This is an experimental feature, however, so the actual resulsts may vary. P.S. I'm not sure setting it to 50% 50% is a good idea, since the transformation itself may vary the element's width and height, top and left.




2. To find the angle, you should not call atan2 on the mouse point only, since it will only calculate the angle between that point and the top left corner of the page. You want the angle between that point and the origin:

   
   
   

   var s_rad = Math.atan2(s_y - o_y, s_x - o_x); // current to origin
   
   

   
   
   

   That'll lead you halfway, but it will still behave oddly (it will rotate around the element origin, but not following the handle as you expect). To make it follow the handle, you should adjust the angle in relation to the clicked point - which will serve as a base for the amount to rotate:

   
   
   

   s_rad -= Math.atan2(h_y - o_y, h_x - o_x); // handle to origin
   
   

   
   
   

   After that you get the rotation working (for one user iteration at least).

You'll notice the handle does not follow the mouse precisely, and the reason is the choice of the origin point - defaulting to the element's top/left corner. Adjust it to somewhere inside the element (maybe using a data- attribute) and it should work as expected.

However, if the user interacts with the handle multiple times, it's not enough to just set the rotation angle, you must update whatever it was during the last iteration. So I'm adding a last_angle var that will be set on the first click and then added to the final angle during drag:

// on mousedown

last_angle = target_wp.data(last_angle) || 0;



// on mousemove

s_rad += last_angle; // relative to the last one



// on mouseup    

target_wp.data(last_angle, s_rad);

Here's the final working example. (Note: I fixed the nesting of your mouse handlers, so they don't get added again after each click)

$(function () {

    var dragging = false,

        target_wp,

        o_x, o_y, h_x, h_y, last_angle;

    $('.handle').mousedown(function (e) {

        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

        });

        o_x = target_wp.data(origin).left;

        o_y = target_wp.data(origin).top; // origin point

        

        last_angle = target_wp.data(last_angle) || 0;

    })



    $(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

                s_rad += last_angle; // relative to the last one

                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%');

            }

        }

    }) // end mousemove

    

    $(document).mouseup(function (e) {

        dragging = false

        var s_x = e.pageX,

            s_y = e.pageY;

        

        // Saves the last angle for future iterations

        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

        s_rad += last_angle;

        target_wp.data(last_angle, s_rad);

    })

})

.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;

}

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js></script>

<div class=draggable_wp>

    <div class=el></div>

    <div class=handle></div>

</div>