div can move but its only 1

by outis

HTML

<div class="projects">
        <div 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>

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

.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; */
    font-family: 'Source Sans Pro';
   ...

JavaScript

var wrapper = document.querySelector(".panel");

        wrapper.addEventListener("dragstart", () => {
            wrapper.classList.add("active");
            wrapper.addEventListener("mousemove", onDrag);

        });
        document.addEventListener("mouseup", () => {
            wrapper.classList.remove("active");
            wrapper.removeEventListener("mousemove", onDrag);

        });


        function onDrag({ movementX, movementY }) {
            let getStyle = window.getComputedStyle(wrapper);
            let leftVal = parseInt(getStyle.left);
            let topVal = parseInt(getStyle.top);
            wrapper.style.left = `${leftVal + movementX}px`;
            wrapper.style.top = `${topVal + movementY}px`;
        }