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:

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

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.

Ver ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(6 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre