My querySelectorAll can't select more than 1 item

Question

I'm trying to make a really cool draggable div that looks like a program window within the website. It can be moved and dragged around.

Now, I managed to make one of the div's draggable, but when I tried to declare multiple div's, it doesn't make the second div draggable like the first.

        var wrapper = document.querySelector("div.gamedev-panel, div.webdev-panel");
        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`;
        }
        wrapper.addEventListener("mousedown", () => {
            wrapper.classList.add("active");
            wrapper.addEventListener("mousemove", onDrag);
        });
        document.addEventListener("mouseup", () => {
            wrapper.classList.remove("active");
            wrapper.removeEventListener("mousemove", onDrag);
        });

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

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

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

.webdev-heading {
    background: none;
    /* position: absolute;
    right: 5rem; */
    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: #252422;
    pointer-events: none;
}

.webdev-content{
    margin-right: 1rem;
    pointer-events: none;
}

.webdev-img{
    width: 80%;
    height: 80%;

    position: absolute;
    right: 4rem;
    top:5rem;

    pointer-events: none;
}

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

Is there another way to make both the div's draggable in the same code rather than duplicating the entire js?

Instead of `querySelector`, use [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) which will find all elements matching your selector and return them as a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList). — D M, Jul 22 '22 at 13:07
@DM How do you return them as a collection? I tried to use querySelectorAll and now both doesnt work — , Jul 22 '22 at 13:10
@WerWer you need to loop over the `NodeList` and add the event listener for each single element. — Emiel Zuurbier, Jul 22 '22 at 13:11
@EmielZuurbier Well this is my code now and it still didnt work. Am I missing something? Edit i cant paste my code here, is there a way to paste it better? — , Jul 22 '22 at 13:17
First check the browser's console and see if it tells you anything about your code. If it does, then research the error. Otherwise post a new question about your revised code. — Emiel Zuurbier, Jul 22 '22 at 13:20
@EmielZuurbier Basically I put everything line of code under var wrapper into a foreach: ` array.forEach(element => { // my code here});`and it completely removed every ability to drag. Im not sure if thats what you mean by looping over nodelist — , Jul 22 '22 at 13:24
Here's a reference to NodeList, which includes looping examples: https://developer.mozilla.org/en-US/docs/Web/API/NodeList — mykaf, Jul 22 '22 at 13:39
@user1599011 I mean, you pasted the exact same link as the guy above and I still have no idea how to solve it. I basically tried foreach loop, for loop with an i — , Jul 22 '22 at 13:50
First you get a *list* of nodes/elements: `var wrappers = document.querySelectorAll('...');` You then loop over each node and add the event listener: `wrappers.forEach(wrapper => { wrapper.addEventListener(...); });` Don't put **every** line in the loop, only the code where you add the event listeners to the wrappers. — Emiel Zuurbier, Jul 22 '22 at 14:04
What didn't work about your looping attempts? Was there an error in your console? How did the result not match your expected result? — mykaf, Jul 22 '22 at 14:10

My querySelectorAll can't select more than 1 item

0 Answers0