Obtener la posición x/y de un elemento con jQuery

Name: Obtener la posición x/y de un elemento con jQuery
Brand: Jose Aguilar
SKU: joseaguilarblog-2790
Availability: InStock
Rating: 5 (6 reviews)

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:

Source code

<div class="element"></div>

Y en <head> de la página añadiremos las siguientes lineas jQuery:

Source code

<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.

Ver ejemplo en funcionamiento