Przesunięcie elementu - mousemove

0

Witam,
napisałem prostą aplikację w której łapie kwadracik(mousedown), następnie za pomocą myszy mogę go przesuwać po ekranie. Wszystko działa ok, tylko za każdym razem jak przesunę kwadracik to prawie błyskawicznie wraca on na swoje miejsce wejściowe, tak jakby reakcja na brak ruchu. W jaki sposób wyeliminować ten błąd?

        const Sqr = document.getElementById('square');
        const Board = document.querySelector('.board');
        let gora;
        let lewo;
        let isMoving = false;

        function zlap() {
            isMoving = true;
        } 

        function ruszaj(e) {
            if (isMoving == true) {
                gora = e.offsetY;
                lewo = e.offsetX;

                Sqr.style.top = gora + 'px';
                Sqr.style.left = lewo + 'px';
            }
        }

        Sqr.addEventListener('mousedown', zlap);
        Board.addEventListener('mousemove', ruszaj);
        window.addEventListener('mouseup', function (e) {
            if (isMoving == true) {
                gora = e.offsetY;
                lewo = e.offsetX;

                Sqr.style.top = gora + 'px';
                Sqr.style.left = lewo + 'px';
                isMoving = false;
            }
        })
    </script>```
0

podaj cały kod

0

Nie wiem, co tam konkretnie próbujesz zrobić, ale może warto użyć draggable?
https://www.w3schools.com/html/html5_draganddrop.asp
https://javascript.info/mouse-drag-and-drop

0
phanc napisał(a):

podaj cały kod

<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przesuwanie kwadratu</title>

    <style>
        div.board {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        div.square {
            position: relative;
            width: 50px;
            height: 50px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="board">
        <div class="square" id="square"></div>
    </div>

    <script>
        const Sqr = document.getElementById('square');
        const Board = document.querySelector('.board');
        let gora;
        let lewo;
        let isMoving = false;



        function zlap() {
            isMoving = true;

        } 

        function ruszaj(e) {
            if (isMoving == true) {
                gora = e.offsetY;
                lewo = e.offsetX;

                Sqr.style.top = gora + 'px';
                Sqr.style.left = lewo + 'px';
                console.log(gora);
            }
        }

        Sqr.addEventListener('mousedown', zlap);
        Board.addEventListener('mousemove', ruszaj);
        window.addEventListener('mouseup', function (e) {
            if (isMoving == true) {
                gora = e.offsetY;
                lewo = e.offsetX;

                Sqr.style.top = gora + 'px';
                Sqr.style.left = lewo + 'px';
                isMoving = false;
            }
        })
    </script>
</body>

</html>```
1

Problem polega na tym, że łapiesz e.offsetX; i e.offsetY; w odniesieniu do zdarzenia e którego targetem będzie obiekt, nad którym mysz w danym momencie się rusza. Tyle tylko, że jednocześnie poruszasz kwadratem, w efekcie czasem targetem zdarzenia będzie div.board a czasami div.square więc współrzędne myszy liczone względem obiektu nad który się właśnie znajduje będą ci ciągle skakać.

mousemove { target: <div.board>, buttons: 1, clientX: 389, clientY: 190, layerX: 121, layerY: 176 }  

mousemove { target: <div#square.square>, buttons: 1, clientX: 389, clientY: 191, layerX: 0, layerY: 1 }

Zamiast e.offsetX łap np. e.clientX i później sobie odpowiednio przeliczaj.

0

Super. Wielkie dzięki. Nie spodziewałem się, że mój błąd jest akurat w tym miejscu i szukałem gdzie indziej, a już mnie to trochę zaczynało irytować. Pozdrawiam serdecznie

1 użytkowników online, w tym zalogowanych: 0, gości: 1