Better way to use mousedown and mousemove?

Question

I am using the following to rotate elements around a center point.

$('.marker').on 'mousedown': ->
  $(this).on 'mousemove': ->
    rotateAnnotationCropper $('.innerCircle').parent(), event.pageX, event.pageY, $(this)

Not sure if this is needed, but the function it is calling is below.

rotateAnnotationCropper = (offsetSelector, xCoordinate, yCoordinate, markerNumber) ->
  x = xCoordinate - (offsetSelector.offset().left) - (offsetSelector.width() / 2)
  y = -1 * (yCoordinate - (offsetSelector.offset().top) - (offsetSelector.height() / 2))
  centerAngle = 90 - (Math.atan2(y, x) * 180 / Math.PI)
  rotate = 'rotate(' + centerAngle + 90 + 'deg)' + ' translateX(-50%)'

It works as I had hoped with one exception. When I am moving the cursor around the center point, I have to keep the cursor exactly over the element, or the movement will stop. Any idea on how I can keep the element moving even if the cursor extends outside of the element?

I am using the class .marker on 5 elements at the moment.

Codepen here: https://codepen.io/DaveVan/pen/QvJORb

Answer 1

Bind to document to capture events outside. See this updated pen .

$('.marker').on 'mousedown': ->
  marker = this
  $(document).on 'mousemove': ->
    rotateAnnotationCropper $('.innerCircle').parent(), event.pageX, event.pageY, $(marker)