jQuery obter posição do mouse dentro de um elemento

Eu esperava criar um controle em que um usuário pudesse clicar dentro de uma div, depois arrastar o mouse e soltar o mouse para indicar por quanto tempo eles querem que algo esteja. (Isto é para um controle de calendar, então o usuário estará indicando a duração, no tempo, de um determinado evento)

Parece que a melhor maneira de fazer isso seria registrar um evento “mousedown” no div pai que, por sua vez, registra um evento “mousemove” no div até que um evento “mouseup” seja acionado. Os events “mousedown” e “mouseup” definirão o início e o fim do intervalo de tempo e, à medida que eu acompanho os events “mousemove”, posso alterar dinamicamente o tamanho do intervalo para que o usuário possa ver o que está fazendo. Eu baseei isso de como os events são criados no Google Agenda.

O problema que estou tendo é que o evento jQuery parece fornecer apenas informações confiáveis ​​de 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: texto alternativo

   

    Uma maneira é usar o método offset do jQuery para converter as coordenadas event.pageY e event.pageY do evento em uma posição do mouse relativa 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, é bem legal 🙂

        

    Esta solução suporta todos os principais navegadores, incluindo o IE. Ele também cuida da rolagem. Primeiro, recupera a posição do elemento em relação à página de forma eficiente e sem usar uma function recursiva. Em seguida, obtém o xey do clique do mouse relativo à 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; } 

    A resposta @AbdulRahim está quase correta. Mas sugiro a function abaixo como substituto (para mais referências):

     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(mx, my); }); 

    Se você fizer com que seu elemento pai seja “position: relative”, ele será o “pai de deslocamento” para as coisas sobre as quais você está acompanhando os events do mouse. Assim, o jQuery “position ()” será relativo a isso.

    Aqui está um que também lhe dá a posição percentual do ponto no caso de você precisar dele. 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 = $('
    ').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; } 
      

    Hotspot position is at:

    Eu sugeriria isso:

     e.pageX - this.getBoundingClientRect().left