Obtener la posición x/y de un elemento con jQuery
En este artículo vamos a ilustrar un ejemplo para obtener las coordenadas actuales (X/Y) de un elemento situado dentro de nuestra página web utilizando jQuery. Para ello vamos a utilizar el método position().
El método .position() nos permite recuperar la posición actual de un elemento dentro del DOM.
Nuestro ejemplo va a ser tan simple como mover una bolita tras hacer click en cualquier posición de la pantalla.
Tendremos un elemento situado dentro del <body> de nuestra página:
Y en <head> de la página añadiremos las siguientes lineas jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('body').css('width', $(window).width());
$('body').css('height', $(window).height());
$('body').on('click', function(e) {
$('.element').css('top', e.pageY);
$('.element').css('left', e.pageX);
$('.element').text(e.pageX+':'+e.pageY);
});
});
</script>
Donde incialmente estamos estableciendo las dimensiones del body de la página según la pantalla del usuario y seguidamente capturamos el evento click para que cada vez que se haga click en la pantalla, el elemento cambie de posición.
Se requiere incluir la librería jQuery para que funcione correctamente.
Deja una respuesta