Zdobądź pozycję myszy w przewijanym dziale

Question

Jeszcze jedno pytanie, które wyśmiewa mnie w ciągu ostatnich kilku dni. Jak mogłeś zauważyć na innych moich pytaniach, tworzę oprogramowanie do map myśli. Tak (bardzo uproszczony) Mam dwa divy. Jeden, który jest kwadratem na stronie, a drugi wewnątrz div, który jest około 10 razy większy i łatwiejszy do przeciągnięcia. Jest tak, że obiekty mogą być umieszczane na ekranie, a następnie przesuwane lekko na bok podczas dodawania innego obiektu itp. Robię to, tworząc przewijany zewnętrzny div.

Problemy, które mam, mają związek z pozycją myszy w skrypcie java. Jeśli zdobędę pozycję myszy w dowolnym miejscu w div, to nie będzie ona poprawna, ponieważ przesunę wewnętrzną część div o połowę jej rozmiaru do góry i lewej (tak skutecznie użytkownik patrzy na środek płótna i może pójść w dowolny sposób) . Wypróbowałem dziesiątki różnych funkcji współrzędnych myszy, ale żadna z nich nie działa. Przykładem, który ma być przeglądarką, którą znalazłem gdzieś w Internecie, jest:

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 

Ale nawet to nie działa. Jestem prawie pewien, że ten błąd jest spowodowany tym, że wewnętrzny div jest przeciągalny. Mam nadzieję, że w pewnym sensie próbowałem wyjaśnić, ale jeśli nie mam here is a very simple jsfiddle w próbie zademonstrowania sytuacji, którą mam (chociaż tutaj nie robi się tu kliknięcia myszką, tylko po to, żeby zademonstrować moją strukturę div). W produkcie, który robię, użytkownik dwukrotnie kliknie na płótnie i pojawi się nowy obiekt, a więc dlaczego współrzędne myszy muszą być poprawne.

Mam nadzieję, że ktoś tam może mi pomóc.

Z góry dziękuję.

EDIT: Nie można wspomnieć, że przez część mojej aplikacji używam JQuery więc rozwiązanie z lub bez JQuery będzie dobrze. Dzięki jeszcze raz.

Answer 1

Mam nadzieję, że dobrze zrozumiałem Twój problem.

Można użyć wartości .offset(), aby określić bieżące przesunięcie dowolnego elementu względem dokumentu głównego. To przesunięcie można następnie porównać z pozycją myszy.

Można użyć event.pageX i event.pageY, aby określić aktualną pozycję myszy.

Możesz użyć $ {dokument} .scrollLeft() i $ {dokument}. scrollTop(), aby określić aktualną pozycję przewijania.

pozycji myszy względem wewnętrznej div można następnie otrzymać z

$("#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

Wiem, że to bardzo późno, ale wpadłem na tej samej sytuacji sam i to w jaki sposób mogę rozwiązać go.

Nie chciałem używać jQuery, więc napisałem tę funkcję rekurencyjnego offsetu, aby obsłużyć problem z przesunięciem przewijania i umieszczeniem elementu div na przykład w wielu przewijanych elementach div.

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; 
} 

Używanie go za prawdziwe:

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

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