He seguido jugando últimamente con este sistema para poder establecer que el punto 0,0 sea el punto de click y que al moverlo se vaya creando el campo de coordenadas.
Hice esto pero no veo que funcione "muy bien" que digamos, creo que la formula que estoy planteando no es la correcta y temo equivocarme en este aspecto ya que literalmente es la base del código.
$(document).ready(function(){
var press; var pX; var pY;
$(this).mousedown(function(a){
press = true; pX = a.pageX; pY = a.pageY;
}).mouseup(function(a){
press = false;
}).mousemove(function(b){
if(press){
var rango = 20;
var x = Math.round((b.pageX*rango/pX)-(rango));
var y = Math.round(-(b.pageY*rango/pY)+(rango));
$('body').html('X = ' + x + ' | Y = ' + y);
}
});
});
Con esto se podría llegar a crear algo similar a un efecto "drag" o como por ejemplo, imagínense un mapa, al presionar en X punto y arrastrarlo se moverá a su posición negativa. Seria literalmente el mismo funcionamiento que tienen los SO en pantallas táctiles al mover un listado (Si mueves el dedo hacia arriba, se ira bajando la lista).
Saludos.