raton - seleccionar elementos jquery
jQuery obtiene la posición del mouse dentro de un elemento (8)
Aquí hay uno que también le da una posición porcentual del punto en caso de que lo necesite. 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>
Esperaba crear un control en el que un usuario pudiera hacer clic dentro de un div, luego arrastrar el mouse y luego subir el mouse para indicar cuánto tiempo quieren que esté. (Esto es para un control de calendario, por lo que el usuario indicará la duración, en el tiempo, de un determinado evento)
Parece que la mejor manera de hacerlo sería registrar un evento "mousedown" en el div principal que a su vez registra un evento "mousemove" en el div hasta que se desencadene 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 estoy teniendo es que el evento jQuery parece solo proporcionar información fiable de coordenadas del mouse en referencia a toda la página. ¿Hay alguna manera de discernir cuáles son las coordenadas en referencia al elemento padre?
Editar:
Aquí hay una foto de lo que estoy tratando de hacer:
Esta solución es compatible con todos los principales navegadores, incluido IE. También se ocupa de desplazarse. Primero, recupera la posición del elemento relativo a la página de manera eficiente y sin usar una función recursiva. Luego obtiene la xey del clic del mouse relativo a la página y realiza la resta para obtener la respuesta que es la posición relativa al elemento (el elemento puede ser una imagen o div, por ejemplo):
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;
}
La respuesta de @AbdulRahim es casi correcta. Pero sugiero la siguiente función como sustituto (para una referencia posterior):
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);
});
Para obtener la posición de clic relativa al elemento seleccionado actualmente
Usa este código
$("#specialElement").click(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
});
Si haces que tu elemento padre sea "posición: relativa", entonces será el "padre compensado" para las cosas sobre las que estás rastreando los eventos del mouse. Por lo tanto, la "posición () jQuery" será relativa a eso.
Sugeriría esto:
e.pageX - this.getBoundingClientRect().left
Uso este código, es bastante agradable :)
<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>
Una forma es utilizar el método de offset jQuery para traducir las coordenadas event.pageX y event.pageX del evento a la posición del mouse relativa al elemento principal. 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;
});