div cant move

by outis

HTML

<div class="projects">
        <div id="DevGames" class="gamedev-panel panel">
            <div class="gamedev-titlebar">
                <div class="btn-1 game-btn"></div>
                <div class="btn-2 game-btn"></div>
                <div class="btn-3 game-btn"></div>
            </div>
            <h2 class="gamedev-heading">I DEVELOP GAMES</h2>
            <img src="images/game.gif" alt="" class="gamedev-gif">
        </div>
        <div id="MakeSites" class="webdev-panel panel">
            <div class="webdev-content">
                <h2 class="webdev-heading">I MAKE WEBSITES</h2>
                <img src="images/web.png" alt="" class="webdev-img">
            </div>
            <div class="webdev-titlebar">
                <div class="btn-1 web-btn"></div>
                <div class="btn-2 web-btn"></div>
                <div class="btn-3 web-btn"></div>
            </div>

        </div>
        <div class="others-panel"></div>
    </div>

CSS

.projects {
    display: flex;
    width: 100%;
    height: 125vh;
    background-image: url(images/laptop.png);
    background-position: 100%;
    background-position-y: center;
    background-position-x: center;
    background-size: 95%;
    background-repeat: no-repeat;
}

.panel {
  outline: 2px dashed red;
}

.gamedev-panel {
    position: absolute;
    top: 3rem;
    left: 16rem;
    width: 40rem;
    height: 30rem;
    background-color: #403d39;
}

.gamedev-titlebar {
    height: 3rem;
    background: #EB5E28;

    display: flex;
    align-items: center;
    justify-content: right;
}

.btn-1 {
    background: turquoise;
}

.btn-2 {
    background: yellow;
}

.btn-3 {
    background: red;
}

.game-btn {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    margin-right: 1rem;
}

.gamedev-heading {
    background: none;
    position: absolute;
    /* width: 369.43px;
height: 40.32px;
left: 408.26px;
top: 2592.77px; */

    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 36px;
    line-height: 45px;
    letter-spacing: 0.1em;
    margin-left: 1rem;

    color: #CCC5B9;
    pointer-events: none;
}

.gamedev-gif {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    pointer-events: none;
}

.webdev-panel {
    position: absolute;
    top: 1rem;
    right: 16rem;
    width: 25rem;
    height: 30rem;
    background-color: #fffcf2;

    display: inline-flex;
    justify-content: flex-end;

    overflow: hidden;

}

.webdev-titlebar {
    /* position: absolute; */
    height: 30rem;
    width: 3rem;
    background: #EB5E28;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    pointer-events: none;
}

.web-btn {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    margin-top: 1rem;
    /* margin-right: 1rem; */
    pointer-events: none;
}

.webdev-heading {
    background: none;
    /* position: absolute;
    right: 5rem; */
   ...

JavaScript

var wrapper = document.querySelectorAll(".panel");
				console.log(wrapper.constructor);
        for (let i = 0; i < wrapper.length; ++i) {
            let iP = i, 
                panel = wrapper[i],
                dragger = onDrag.bind(panel);
        		/* multiple event listeners for mouse up and down */
        		console.log(`${i} #${panel.id}`);
            panel.addEventListener("mousedown", () => {
                panel.classList.add("active");
                panel.addEventListener("mousemove", dragger);
                console.log(`check mouse down ${iP} #${panel.id}.${panel.className}`); /* checking mouse down */
            });
            document.addEventListener("mouseup", () => {
                panel.classList.remove("active");
                panel.removeEventListener("mousemove", dragger);
                console.log(`check mouse up ${iP} #${panel.id}.${panel.className}`); /* checking mouse down */
            });
        }

				/* what moves the divs */
        function onDrag({ movementX, movementY }) {
            let getStyle = window.getComputedStyle(this);
            let leftVal = parseInt(getStyle.left);
            let topVal = parseInt(getStyle.top);
            this.style.left = `${leftVal + movementX}px`;
            this.style.top = `${topVal + movementY}px`;
        }