使用 mousedown 和 mousemove 的更好方法？

Question

我正在使用以下方法围绕中心点旋转元素。

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

不确定是否需要这个，但它调用的函数在下面。

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

一切如我所愿，只有一个例外。当我围绕中心点移动光标时，我必须将光标准确地保持在元素上方，否则移动将停止。关于即使光标延伸到元素之外我如何保持元素移动的任何想法？

我目前在 5 个元素上使用 class .marker。

Codepen 在这里：https://codepen.io/DaveVan/pen/QvJORb

Answer 1

绑定到 document 以捕获外部事件。参见 this updated pen。

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

使用 mousedown 和 mousemove 的更好方法？

Better way to use mousedown and mousemove?

javascript

jquery

coffeescript