jQuery obtiene la posición del mouse dentro de un elemento
Esperaba crear un control en el que un usuario pudiera hacer clic dentro de un div, luego arrastrar el mouse y luego soltarlo para indicar cuánto tiempo quiere que dure algo. (Esto es para un control de calendario, por lo que el usuario estará indicando la duración, en el tiempo, de un determinado evento)
Parece que la mejor manera de hacer esto sería registrar un evento "mousedown" en el div principal que a su vez registre un evento "mousemove" en el div hasta que se active un evento "mouseup". Los eventos "mousedown" y "mouseup" definirán el inicio y el final del rango de tiempo y, a medida que sigo los eventos "mousemove", puedo cambiar dinámicamente el tamaño del rango para que el usuario pueda ver lo que está haciendo. Basé esto en cómo se crean los eventos en el calendario de Google.
El problema que tengo es que el evento jQuery parece proporcionar solo información confiable de las coordenadas del mouse en referencia a toda la página. ¿Hay alguna forma de discernir cuáles son las coordenadas en referencia al elemento padre?
Editar:
Aquí hay una imagen de lo que estoy tratando de hacer:
Una forma es utilizar el offsetmétodo jQuery para traducir las coordenadas event.pageXy event.pageYdel evento a una posición del mouse relativa al padre. Aquí hay un ejemplo para referencia 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 obtener la posición del clic en relación con el elemento actual en el que se hizo clic,
use este código
$("#specialElement").click(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
});
Utilizo este fragmento de código, es bastante bueno :)
<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>
La respuesta de @AbdulRahim es casi correcta. Pero sugiero la siguiente función como sustituto (para mayor referencia):
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);
});
