div cant move

by outis

HTML

<div class="projects">
        <div id="DevGames" class="gamedev-panel panel" draggable="true">
            <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" draggable="true">
            <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: 1px 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 panels = document.querySelectorAll(".panel");

document.addEventListener('dragstart', (evt) => {
	evt.dataTransfer ||= {};
  evt.dataTransfer.dropEffect = 'move';
  evt.target.classList.add("active");
  evt.preventDefault();
  console.log(`dragstart #${evt.target.id}`);
});
var nSkip = 10,
    nLog = 1;
for (let panel of panels) {
panel.addEventListener('drag', (evt) => {
  evt.target.classList.remove("active");
  evt.preventDefault();
  if (nSkip > 0) {
    --nSkip;
  } else if (nLog > 0) {
  	--nLog;
    console.log(evt);
  }
  console.log(`dragend #${evt.target.id}`);
});
}

document.addEventListener('dragend', (evt) => {
  evt.target.classList.remove("active");
  evt.preventDefault();
  console.log(`dragend #${evt.target.id}`);
});
				/*
        for (let panel of panels) {
            panel.addEventListener("dragstart", (evt) => {
            	evt.dataTransfer ||= {};
              evt.dataTransfer.dropEffect = 'move';
              panel.classList.add("active");
              console.log(`dragstart #${panel.id}`);
              evt.preventDefault();
            });
            panel.addEventListener("drag", (evt) => {
            	evt.target;
            });
            panel.addEventListener("dragend", (evt) => {
              panel.classList.remove("active");
              console.log(`dragend #${panel.id}`);
              evt.preventDefault();
            });
        }
				*/
				/* what moves the divs */
        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`;
        }