Calcular distancia de un punto a otro con jQuery

En este tutorial les voy a mostrar cómo utilizar jQuery para obtener la distancia de un punto a otro con el mouse de un determinado elemento en la página. Este trozo de código puede ser útil en una aplicación web en donde se desee ejecutar un evento cuando el ratón del usuario se encuentre en una distancia determinada de un elemento.

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

Código :

<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 .mousemove, 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:

Código :

<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, acá dejo una demo en donde está todo el código completo:

DEMO

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

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.