TECNato – TIC's Perú

En este tutorial les voy a mostrar cómo utilizar jQuery para obtener la distancia con el mouse de un determinado elemento en la página. Este trozo de código puede ser útil en una aplicación web pequeña o para otras aplicaciones que deseamos y que tiene un montón de interacción con el usuario y desea ejecutar un evento cuando el ratón del usuario se encuentra en una distancia determinada de un elemento.

Solo creamos las variables globales, el evento y la función para el documento.

Código Javascript :

<script type="text/javascript">
$(document).ready(function(){
   var mX, mY, distance,
    $distance = $('#distancia span'),
    $element  = $('#elemento');

    function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
    }

    $(document).mousemove(function(e) {
        mX = e.pageX;
        mY = e.pageY;
        distance = calculateDistance($element, mX, mY);
        $distance.text(distance);
    });
});
</script>

Como se puede ver en el código hemos establecido una función en el evento .mousemovede manera cada vez que la persona mueve el ratón se procedera con lo siguiente.

Luego se utiliza la variable e para obtener la posición X e Y del mouse y envía esto a la función calculateDistance con un parámetro de elemento.

Ahora creamos nuestros contenedores divs para recibir los datos:

<div id=»distancia»>La distancia hasta el punto es: <span> </span> pixeles.</div>
<br />
<div id=»texto»>
<h4>Partiendo del punto de partida que es el 0 de color naranja</h4>
<p>Un ejemplo seria calcular la distancia desde el punto que es el 0 de color naranja hasta una caja azul con circulo blanco: </p>
</div>
<div id=»elemento»>0</div>

Eso es casi todo, aca dejo una demo en donde estan todo el codigo completo (le das botón derecho del mouse en la pagina de la demo y luego le das ver codigo fuente) :

DEMO

Eso es todo, espero te haya gustado y que te sea muy útil.