How to move all images with javascript queryselectorall in for loop?

Question

I can move one image by define for each but I need to do it in for loop, I have a code as I show below,

var elem = document.querySelectorAll(".yikama");
var el;
for (i = 0; i = elem.length; i++)
{
    var el = elem[i]
    el.addEventListener("mousedown", start)
    function start() {
        addEventListener("mousemove", move)
    }

    function move(b) {
        b = b || event;
        el.style.left = b.pageX - 290 + "px";
        el.style.top = b.pageY - 190 + "px";
    }
    el.addEventListener("mouseup", function () {
        removeEventListener("mousemove", move);
    })   
}

But I had an error which is Uncaught TypeError: Cannot read property 'addEventListener' of undefined at 1:141 What should I do to fix it?

In `for` loop second statement should be condition like `i < elem.length`. But you have it as assignment `i = elem.length`. — Karan, Feb 09 '21 at 09:02
@AlpayToprak What exactly do you wish to do? Move all the images when the mouse pointer hovers over any one of them? Or maybe move them individually? — Vaibhav, Feb 09 '21 at 09:04
your `start()` function need `el` to `addEventListener`, just like `el.addEventListener("mousemove", move)`. — linchong, Feb 09 '21 at 09:04
I want to move each of them individually, images coming from SQL database as many as possible so I need a for loop — Alpay Toprak, Feb 09 '21 at 09:06
Thank you linchong, It fixed the error but again I could not move images — Alpay Toprak, Feb 09 '21 at 09:08
When you drag the picture, will the move event be triggered? — linchong, Feb 09 '21 at 09:19
Yes, it should be triggered, and then I need to drop it somewhere I want — Alpay Toprak, Feb 09 '21 at 10:00

Karan · Accepted Answer · 2021-02-09T11:16:31.303

You have couple mistakes as first you need condition in for loop's second statement like i == elem.length or i === elem.length. From your code you should be using i < elem.length. P.S. You are having an assignment (i = elem.length) here which will not work. It will assign elem.length to variable i and based on value it will return true or false. In your case it will never break the loop and go for infinite loop.

Second mistake is you are not assigning move event to any element. You need to use el.addEventListener & el.removeEventListener inside start & mouseup event.

Use let el instead of var el, so it won't cause closure issue. Add b.preventDefault(); inside move function.

Try complete code like below.

var elem = document.querySelectorAll(".yikama");
for (i = 0; i < elem.length; i++)
{
    let el = elem[i]
    el.addEventListener("mousedown", start)
    function start() {
        el.addEventListener("mousemove", move)
    }

    function move(b) {
        b.preventDefault();
        b = b || event;
        el.style.left = b.pageX - 290 + "px";
        el.style.top = b.pageY - 190 + "px";
    }
    el.addEventListener("mouseup", function () {
        el.removeEventListener("mousemove", move);
    })   
}

Now I can move it which one I want but I could not finish moving and set position for the image, I need to move always. What can I do for this situation — Alpay Toprak, Feb 09 '21 at 09:57

linchong · Answer 2 · 2021-02-09T09:49:31.283

if you want to move image by style.left and style.top, you need to set a position to image

You also need to add preventDefault in the mousemove event, otherwise the mouseup event cannot be triggered after the mousemove event.

The reason is that the browser is also dragging and dropping its own native image, you need to use preventDefault to prevent the default event

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .yikama{
        position: relative;
    }
</style>
<body>
    <img class="yikama"
        src="/xx/xx" alt="" />
</body>
<script>
    var elem = document.querySelectorAll(".yikama");
    var el;
    for (let i = 0; i < elem.length; i++) {
        var el = elem[i]
        el.addEventListener("mousedown", start)
        function start() {
            el.addEventListener("mousemove", move)
        }

        function move(b) {
            b.preventDefault()
            b = b;
            el.style.left = b.pageX - 290 + "px";
            el.style.top = b.pageY - 190 + "px";
        }
        el.addEventListener("mouseup", function () {
            el.removeEventListener("mousemove", move)
        })
    }
</script>

</html>

I want to move my pictures step by step, for example first I want to move the first picture and then I want to move next to one, is this code okay for this situation, because I can only move the first image. should I use if clause for each image — Alpay Toprak, Feb 09 '21 at 10:03
Unfourtanetly, it did not work, I could not move each my images, and I could not drop image where I want to — Alpay Toprak, Feb 09 '21 at 10:18

How to move all images with javascript queryselectorall in for loop?

2 Answers2