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

私は1つの例外を除いて望んでいたように機能します。私がカーソルを中心点の周りに動かすとき、カーソルを要素の上に正確に保持する必要があります。そうしないと、動きが止まります。カーソルが要素の外側に広がっても、要素をどのように動かし続けることができるかについての考え方はありますか？

私は現在、5つの要素にクラス.markerを使用しています。

ここCodepen：外のイベントをキャプチャするdocumentからhttps://codepen.io/DaveVan/pen/QvJORb

Answer 1

バインド。 this updated penを参照してください。

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