[解決済み] jQueryで要素内のマウス位置を取得する

質問

ユーザーがdivの中をクリックし、マウスをドラッグし、そしてマウスを離すことで、欲しいものの長さを指示できるようなコントロールを作りたいと思っていました。 (これはカレンダーコントロールのためで、ユーザーは特定のイベントの時間の長さを示すことになります。）

これを行う最良の方法は、親 div に "mousedown" イベントを登録し、次に "mouseup" イベントが発生するまで div に "mousemove" イベントを登録することであるように見えます。 この "mousedown" と "mouseup" イベントが時間範囲の開始と終了を定義し、 "mousemove" イベントに従うと、ユーザーが何をしているかを確認できるように、範囲のサイズを動的に変更することができるのです。 これは、Googleカレンダーでイベントが作成される方法に基づいています。

私が抱えている問題は、jQueryイベントは、ページ全体を参照した信頼できるマウス座標の情報しか提供しないようだということです。 親要素を基準とした座標を判別する方法はありますか？

編集する

Heresは、私がしようとしていることの写真です。

どのように解決するのですか？

一つの方法として、jQueryの offset メソッドを使用して event.pageX と event.pageY の座標を、親からの相対的なマウスポジションに変換します。以下は、今後の参考のための例です。

$("#something").click(function(e){
   var parentOffset = $(this).parent().offset(); 
   //or $(this).offset(); if you really just want the current element's offset
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;
});