Obtener la posición del ratón en div desplazable

Question

Sin embargo, otra cuestión que ha sido picoteando a mí los últimos días. Como habrán visto en mis otras preguntas, estoy creando algunos programas de mapas mentales. Entonces (extremadamente simplificado) tengo dos divs. Uno que es un cuadrado en la página y otro dentro de ese div, que es aproximadamente 10 veces más grande y se puede arrastrar. Esto es para que los objetos se puedan colocar en la pantalla y luego se muevan ligeramente hacia un lado mientras se agrega otro objeto, etc. Lo hago creando la div externa desplazable.

Los problemas que estoy teniendo, aunque tienen que ver con la posición del ratón en java script. Si obtengo la posición del mouse en cualquier lugar de la div, no será correcto, ya que desplazo la div interna a la mitad de su tamaño hacia la parte superior e izquierda (de manera que el usuario está mirando la mitad del lienzo y puede ir de la forma que quiera) . He intentado decenas de diferentes funciones de coordenadas del mouse, pero ninguna de ellas parece funcionar. Un ejemplo que se supone que es el navegador cruzado que encontré en algún lugar en la web es:

function getMouse(e) { 
    var posx; 
    var posy; 
    if (!e) var e = window.event; 
    if (e.pageX || e.pageY) { 
    posx = e.pageX; 
    posy = e.pageY; 
    } 
    else if (e.clientX || e.clientY) { 
    posx = e.clientX + document.body.scrollLeft + document.getElementById("canvas").scrollLeft; 
    posy = e.clientY + document.body.scrollTop + document.getElementById("canvas").scrollTop; 
    } 
} //getMouse 

Pero incluso esto no funciona. Estoy casi seguro de que el error se debe a que tengo el div interno que se puede arrastrar. Espero haber tenido algún sentido al tratar de explicarlo, pero si no tengo here is a very simple jsfiddle en un intento de demostrar la situación que tengo (aunque no haga clic aquí, para demostrar mi estructura div). En el producto que estoy haciendo, el usuario hará doble clic en el lienzo y aparecerá un nuevo objeto, y por lo tanto, las coordenadas del mouse deben ser correctas.

espero que alguien por ahí me puede ayudar.

Gracias de antemano.

EDIT: No mencioné que para una parte de mi aplicación utilizo JQuery, por lo que una solución con o sin JQuery estaría bien. Gracias de nuevo.

Answer 1

espero que entendí su problema correctamente.

Puede utilizar .offset() para determinar el desplazamiento de cualquier elemento relativo al documento raíz actual. Este desplazamiento se puede comparar con la posición del mouse.

Puede usar event.pageX y event.pageY para determinar la posición actual del mouse.

Usted puede utilizar $ {document} .scrollLeft() y $ {document}. scrollTop() para determinar la posición de desplazamiento actual.

La posición del ratón en relación con el div interior a continuación se pueden obtener con

$("#outer_canvas").mousemove(function(e) { 
    var relativePosition = { 
     left: e.pageX - $(document).scrollLeft() - $('#canvas').offset().left, 
     top : e.pageY - $(document).scrollTop() - $('#canvas').offset().top 
    }; 
    $('#mousepos').html('<p>x: ' + relativePosition.left + ' y: ' + relativePosition.top + ' </p>'); 
}); 

Answer 2

Sé que esto es muy tarde, pero me encontré con la misma situación mí mismo y esta es la forma en que abordé.

No quería usar jQuery, así que escribí esta función de desplazamiento recursivo para manejar un problema con los desplazamientos de desplazamiento y la colocación de un div, por ejemplo, en múltiples divs desplazables.

function recursive_offset (aobj) { 
var currOffset = { 
    x: 0, 
    y: 0 
} 
var newOffset = { 
    x: 0, 
    y: 0 
}  

if (aobj !== null) { 

    if (aobj.scrollLeft) { 
    currOffset.x = aobj.scrollLeft; 
    } 

    if (aobj.scrollTop) { 
    currOffset.y = aobj.scrollTop; 
    } 

    if (aobj.offsetLeft) { 
    currOffset.x -= aobj.offsetLeft; 
    } 

    if (aobj.offsetTop) { 
    currOffset.y -= aobj.offsetTop; 
    } 

    if (aobj.parentNode !== undefined) { 
     newOffset = recursive_offset(aobj.parentNode); 
    } 

    currOffset.x = currOffset.x + newOffset.x; 
    currOffset.y = currOffset.y + newOffset.y; 
    console.log (aobj.id+' x'+currOffset.x+' y'+currOffset.y); 
} 
return currOffset; 
} 

Uso de verdad:

var offsetpos = recursive_offset (this); //or some other element 

    posX = event.clientX+offsetpos.x; 
    posY = event.clientY+offsetpos.y;