jQuery 获取鼠标在元素中的位置

Question

我希望制作一个控件，用户可以在其中单击 div 内部，然后拖动鼠标，然后松开鼠标以指示他们想要某物的长度。 (这是用于日历控件，因此用户将指示特定事件的时间长度)

看起来最好的方法是在父 div 上注册一个“mousedown”事件，然后在该 div 上注册一个“mousemove”事件，直到触发“mouseup”事件。 “mousedown”和“mouseup”事件将定义时间范围的开始和结束，当我跟随“mousemove”事件时，我可以动态更改范围的大小，以便用户可以看到他们在做什么。我基于在谷歌日历中创建事件的方式。

我遇到的问题是 jQuery 事件似乎只提供引用整个页面的可靠鼠标坐标信息。有什么方法可以辨别父元素的坐标是什么？

编辑:

这是我正在尝试做的事情的图片:

Answer 1

一种方法是使用 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;
});