wartość położenia kursora myszy względem diva - błąd

Question

Dzień dobry, stworzyłem mały program, który docelowo miałby przemieszczać kwadrat(div), względem wciśnięcia kursora myszy. Chciałem sprawdzić daną wartość dla divX i divY w console.log, program nie działa i otrzymuje dziwny błąd: Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received. Dodatkowo otrzymuje domyślne wartości: 50, 120, które przypisuje na początku programu. Ma ktoś pomysł, dlaczego program wyświetla te same koordynaty i skąd  ten błąd? Link poniżej:

https://jsfiddle.net/cs7yf2jh/

Answer 1

Błąd, o którym mówisz, wygląda jak błąd z jakiegoś rozszerzenia Chrome i nie dotyczy Twojego kodu.

Co do samego kodu: IMO wystarczy Ci samo e.clientX i e.clientY. W końcu chcesz przesuwać tego diva tam, gdzie jest aktualnie kursor. Niepotrzebne są Ci informacje o tym, gdzie ten kursor jest obecnie od krawędzi tego elementu. Dodatkowo listener dla mousemove lepiej przypiąć do document. Inaczej w chwili, gdy kursor wyjedzie poza div (co właśnie się dzieje przy obecnej wersji), ten przestanie się przesuwać, ale z racji tego, że nie nastąpiło odkliknięcie, całość zacznie się bugować.

Comments

Właśnie e.client nie wystarczy, bo chcę by moment kliknięcia i przesunięcia diva wskazywał koordynaty momentu kliknięcia(kursora), a w tym przypadku wskaże lewy góry róg diva :(

---

W takim razie pobieraj je w momencie mousedown, zapisuj do zmiennej i wykorzystuj potem do obliczeń przy mousemove.

---

Teraz działa poprawnie, a dlaczego  w moim przykładzie to nie ma racji bytu? Bo trochę nie rozumiem dlaczego program nie działa skoro przy mousemove odejmuję dane wartości.

---

Bo to nie są współrzędne kliknięcia, tylko współrzędne po przesunięciu. Zdarzenie mousemove zachodzi po ruszeniu się kursora myszy, więc offset jest liczony względem tego, gdzie przesunąłem kursor, a nie tam, gdzie kliknąłeś. Dodatkowo zmieniasz go przy każdym ruchu myszką.

Answer 2

Proponuję użyć e.pageX i e.pageY i użyć classList

[ on-line ]

    newDiv.style.left = `${e.pageX - offsetX}px`;
    newDiv.style.top = `${e.pageY - offsetY}px`;