jQuery obtém a posição do mouse dentro de um elemento

Eu esperava criar um controle no qual um usuário pudesse clicar dentro de uma div, arrastar o mouse e soltar o mouse para indicar quanto tempo eles querem que algo seja. (Isso é para um controle de calendário, o usuário indicará a duração, no tempo, de um determinado evento)

Parece que a melhor maneira de fazer isso seria registrar um evento "mousedown" na div pai que, por sua vez, registra um evento "mousemove" na div até que um evento "mouseup" seja acionado. Os eventos "mousedown" e "mouseup" definirão o início e o fim do intervalo de tempo e, ao seguir os eventos "mousemove", posso alterar dinamicamente o tamanho do intervalo para que o usuário possa ver o que está fazendo. Baseei isso em como os eventos são criados no Google Agenda.

O problema que estou tendo é que o evento jQuery parece fornecer apenas informações confiáveis ​​sobre as coordenadas do mouse em referência a toda a página. Existe alguma maneira de discernir quais são as coordenadas em referência ao elemento pai?

Editar:

Aqui está uma foto do que estou tentando fazer:

Uma maneira é usar o offsetmétodo jQuery para converter as coordenadas event.pageXe event.pageYdo evento em uma posição do mouse em relação ao pai. Aqui está um exemplo para referência futura:

$("#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;
});

Para obter a posição do clique em relação ao elemento clicado atual
Use este código

$("#specialElement").click(function(e){
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
}); 

Eu uso esse pedaço de código, é muito bom :)

    <script language="javascript" src="http://code.jquery.com/jquery-1.4.1.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
    $(".div_container").mousemove(function(e){
        var parentOffset = $(this).parent().offset();
        var relativeXPosition = (e.pageX - parentOffset.left); //offset -> method allows you to retrieve the current position of an element 'relative' to the document
        var relativeYPosition = (e.pageY - parentOffset.top);
        $("#header2").html("<p><strong>X-Position: </strong>"+relativeXPosition+" | <strong>Y-Position: </strong>"+relativeYPosition+"</p>")
    }).mouseout(function(){
        $("#header2").html("<p><strong>X-Position: </strong>"+relativeXPosition+" | <strong>Y-Position: </strong>"+relativeYPosition+"</p>")
    });
});
</script>

A resposta @AbdulRahim está quase correta. Mas sugiro a função abaixo como substituta (para referência futura):

function getXY(evt, element) {
                var rect = element.getBoundingClientRect();
                var scrollTop = document.documentElement.scrollTop?
                                document.documentElement.scrollTop:document.body.scrollTop;
                var scrollLeft = document.documentElement.scrollLeft?                   
                                document.documentElement.scrollLeft:document.body.scrollLeft;
                var elementLeft = rect.left+scrollLeft;  
                var elementTop = rect.top+scrollTop;

                x = evt.pageX-elementLeft;
                y = evt.pageY-elementTop;

                return {x:x, y:y};
            }




            $('#main-canvas').mousemove(function(e){
                var m=getXY(e, this);
                console.log(m.x, m.y);
            });

Esta solução suporta todos os principais navegadores, incluindo o IE. Ele também cuida da rolagem. Primeiro, ele recupera a posição do elemento em relação à página de forma eficiente e sem usar uma função recursiva. Em seguida, obtém o xey do clique do mouse em relação à página e faz a subtração para obter a resposta que é a posição relativa ao elemento (o elemento pode ser uma imagem ou div por exemplo):

function getXY(evt) {
    var element = document.getElementById('elementId');  //replace elementId with your element's Id.
    var rect = element.getBoundingClientRect();
    var scrollTop = document.documentElement.scrollTop?
                    document.documentElement.scrollTop:document.body.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft?                   
                    document.documentElement.scrollLeft:document.body.scrollLeft;
    var elementLeft = rect.left+scrollLeft;  
    var elementTop = rect.top+scrollTop;

        if (document.all){ //detects using IE   
            x = event.clientX+scrollLeft-elementLeft; //event not evt because of IE
            y = event.clientY+scrollTop-elementTop;
        }
        else{
            x = evt.pageX-elementLeft;
            y = evt.pageY-elementTop;
    }

Se você tornar seu elemento pai "position: relative", será o "pai offset" para as coisas sobre as quais você está rastreando os eventos do mouse. Portanto, o jQuery "position ()" será relativo a isso.

Aqui está um que também fornece a porcentagem da posição do ponto, caso você precise. https://jsfiddle.net/Themezly/2etbhw01/

function ThzhotspotPosition(evt, el, hotspotsize, percent) {
  var left = el.offset().left;
  var top = el.offset().top;
  var hotspot = hotspotsize ? hotspotsize : 0;
  if (percent) {
    x = (evt.pageX - left - (hotspot / 2)) / el.outerWidth() * 100 + '%';
    y = (evt.pageY - top - (hotspot / 2)) / el.outerHeight() * 100 + '%';
  } else {
    x = (evt.pageX - left - (hotspot / 2));
    y = (evt.pageY - top - (hotspot / 2));
  }

  return {
    x: x,
    y: y
  };
}



$(function() {

  $('.box').click(function(e) {

    var hp = ThzhotspotPosition(e, $(this), 20, true); // true = percent | false or no attr = px

    var hotspot = $('<div class="hotspot">').css({
      left: hp.x,
      top: hp.y,
    });
    $(this).append(hotspot);
    $("span").text("X: " + hp.x + ", Y: " + hp.y);
  });


});

.box {
  width: 400px;
  height: 400px;
  background: #efefef;
  margin: 20px;
  padding: 20px;
  position: relative;
  top: 20px;
  left: 20px;
}

.hotspot {
  position: absolute;
  left: 0;
  top: 0;
  height: 20px;
  width: 20px;
  background: green;
  border-radius: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <p>Hotspot position is at: <span></span></p>
</div>

Eu sugeriria isso:

e.pageX - this.getBoundingClientRect().left