3

I am trying to rotate an element (like a dial) by clicking and dragging. I have the basic concept down but its sligtly glitchy.

See my current example here: https://jsfiddle.net/o5jjosvu/

When clicking and dragging inside the element, it judders. But when the cursor is outside the element its a smooth transformation.

Cursor inside element cursor INSIDE element

Cursor outside element cursor OUTSIDE element

I think the issue is due to the way I'm handling the events but I'm not sure.

$('.element').on('mousedown', function() {
    $(document).bind('mousemove', function() {
        // Calculate rotation
    });
});
$(document).on('mouseup', function() {
    $(document).unbind('mousemove');
});

Any help would great, thanks.

Levi Cole
  • 3,561
  • 1
  • 21
  • 36
  • It is less about being inside or outside of the element and more about how close to the center of the element it is. You could try taking the clicked position and pin it to the outside edge of the element or further out to get a smoother transition. – Wild Beard Feb 21 '18 at 22:38
  • `$dial.css('transform', 'rotate('+degrees+'deg)');` will change `$dial.offset()` you can try to get `center_x` and `center_y` outside get_degrees like this [https://jsfiddle.net/o5jjosvu/56/](https://jsfiddle.net/o5jjosvu/56/) – Abraham Uribe Feb 21 '18 at 23:04

1 Answers1

0

Jquery offset function returns the leftmost and topmost relative position of your element. It is regardless of the border of your element.

example image about offset

Since your center does not change, you can compute it outside of the function and use it after. You can do this like https://jsfiddle.net/o5jjosvu/65/.

If you want to move the element, change the center position at that time.

qpzm
  • 428
  • 1
  • 5
  • 13
  • This is great thank you! There was part of me that thought the issue was caused by the `offset` but I assumed it wouldn't be that because transform doesn’t cause reflow. – Levi Cole Feb 22 '18 at 09:03