How to make object rotate with drag, how to get a rotate point around the origin use sin or cos?

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>