How to match text to re-ordered images?

July 2, 2023

I am doing a project where images in a 3 by 3 grid are re-arranged by drag and drop. When and image is dragged over another one, they swap positions. I have got that part working, but I also need a line of text at the bottom showing how the images have been re-ordered. So if I swapped the boxes 1 and 5 the text would no longer read: 1,2,3,4,5,6,7,8,9 but instead: 5,2,3,4,1,6,7,8,9. I am really struggling with how to change the positions of numbers in the text as the images swap. Here is how it looks(the colors of the boxes were chosen randomly and have no importance):

This is my code:

//IMAGE ORDER

let order=[1,2,3,4,5,6,7,8,9]

function showOrder(order) {
    document.getElementById('order').textContent = "Order: " + order.toString();
};

showOrder(order);



//DRAG AND DROP SWAP

var draggedImage = null;
var items;

function dragStart(e) {
    draggedImage = this;
    e.dataTransfer.effectAllowed="move";
    e.dataTransfer.setData("item", this.innerHTML); 
}

function dragOver(e) {
    e.preventDefault();

    e.dataTransfer.dropEffect = "move";
    return false;
}

function dragEnter(e) {
    this.classList.add("dragover"); 
}

function dragLeave(e) {
    this.classList.remove("dragover"); 
}

function drop(e) {
    e.stopPropagation();

    if (draggedImage != this) {
        draggedImage.innerHTML = this.innerHTML; 
        draggedImage.setAttribute("data-item", this.innerHTML);

        let replacedImage = e.dataTransfer.getData("item"); 
        this.innerHTML = replacedImage;
        this.setAttribute("data-item", replacedImage);
        }
        return false;
}

function dragEnd(e) {
    items.forEach(function(item) {
        item.classList.remove("dragover"); 
    });
}

document.addEventListener("DOMContentLoaded", event => {
    items = document.querySelectorAll(".container .image");

    items.forEach(function(item) {
        item.addEventListener("dragstart", dragStart);
        item.addEventListener("dragenter", dragEnter);
        item.addEventListener("dragover", dragOver);
        item.addEventListener("dragleave", dragLeave);
        item.addEventListener("drop", drop);
        item.addEventListener("dragend", dragEnd);
    });
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
    <style>
      .container {
          width: 330px;
          height: 330px;
          background-color: lightgrey;
          display: flex;
          flex-wrap: wrap;
      }
      .image {
        width: 100px;
        height: 100px;
        background-color: #fff5d7;
        text-align: center;
        line-height: 100px;
        margin: 5px;
        cursor: move;
      }
      .order {
        width: 330px;
        height: 50px;
        background-color: lightgrey;
        margin-top: 10px;
        text-align: center;
        line-height: 50px;
        font-size:x-large;
        font-family: Helvetica;
      }
  </style>
  </head>
  <body>
        <h1>Image re-ordering</h1>  
        <h2>Drag and drop to swap images</h2>
        <div class="container">
          <div draggable="true" class="image" id="1"><img src="Dummy billeder/nummer 1.png" width="100px"></div>
          <div draggable="true" class="image" id="2"><img src="Dummy billeder/nummer 2.png" width="100px"></div>
          <div draggable="true" class="image" id="3"><img src="Dummy billeder/nummer 3.png" width="100px"></div>
          <div draggable="true" class="image" id="4"><img src="Dummy billeder/nummer 4.png" width="100px"></div>
          <div draggable="true" class="image" id="5"><img src="Dummy billeder/nummer 5.png" width="100px"></div>
          <div draggable="true" class="image" id="6"><img src="Dummy billeder/nummer 6.png" width="100px"></div>
          <div draggable="true" class="image" id="7"><img src="Dummy billeder/nummer 7.png" width="100px"></div>
          <div draggable="true" class="image" id="8"><img src="Dummy billeder/nummer 8.png" width="100px"></div>
          <div draggable="true" class="image" id="9"><img src="Dummy billeder/nummer 9.png" width="100px"></div>
        </div>
        <div class="order" id="order"></div>
    <script src="gasflasker test.js"></script>
  </body>
</html>

I have tried finding a way to indentify the position of the two images in the grid and then swapping those numbers in an array, when an image is dropped but I could not get it to work.

>Solution :

Copy the IDs to your draggable content () and update the order box on the drop.

document.querySelectorAll('.container .image').forEach(div => {
  div.querySelector('img').dataset.id = div.id;
});

const updateOrder = () => {
  document.getElementById('order').textContent = 'Order: ' + 
    [...document.querySelectorAll('.container .image img')].map(img => img.dataset.id).join(', ');
};

updateOrder();

//DRAG AND DROP SWAP

var draggedImage = null;
var items;

function dragStart(e) {
    draggedImage = this;
    e.dataTransfer.effectAllowed="move";
    e.dataTransfer.setData("item", this.innerHTML); 
}

function dragOver(e) {
    e.preventDefault();

    e.dataTransfer.dropEffect = "move";
    return false;
}

function dragEnter(e) {
    this.classList.add("dragover"); 
}

function dragLeave(e) {
    this.classList.remove("dragover"); 
}

function drop(e) {
    e.stopPropagation();

    if (draggedImage != this) {
        draggedImage.innerHTML = this.innerHTML; 
        draggedImage.setAttribute("data-item", this.innerHTML);

        let replacedImage = e.dataTransfer.getData("item"); 
        this.innerHTML = replacedImage;
        this.setAttribute("data-item", replacedImage);
        updateOrder();
        }
        return false;
}

function dragEnd(e) {
    items.forEach(function(item) {
        item.classList.remove("dragover"); 
    });
}

document.addEventListener("DOMContentLoaded", event => {
    items = document.querySelectorAll(".container .image");

    items.forEach(function(item) {
        item.addEventListener("dragstart", dragStart);
        item.addEventListener("dragenter", dragEnter);
        item.addEventListener("dragover", dragOver);
        item.addEventListener("dragleave", dragLeave);
        item.addEventListener("drop", drop);
        item.addEventListener("dragend", dragEnd);
    });
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
    <style>
      .container {
          width: 330px;
          height: 330px;
          background-color: lightgrey;
          display: flex;
          flex-wrap: wrap;
      }
      .image {
        width: 100px;
        height: 100px;
        background-color: #fff5d7;
        text-align: center;
        line-height: 100px;
        margin: 5px;
        cursor: move;
      }
      .order {
        width: 330px;
        height: 50px;
        background-color: lightgrey;
        margin-top: 10px;
        text-align: center;
        line-height: 50px;
        font-size:x-large;
        font-family: Helvetica;
      }
  </style>
  </head>
  <body>
        <h1>Image re-ordering</h1>  
        <h2>Drag and drop to swap images</h2>
        <div class="container">
          <div draggable="true" class="image" id="1"><img src="Dummy billeder/nummer 1.png" width="100px"></div>
          <div draggable="true" class="image" id="2"><img src="Dummy billeder/nummer 2.png" width="100px"></div>
          <div draggable="true" class="image" id="3"><img src="Dummy billeder/nummer 3.png" width="100px"></div>
          <div draggable="true" class="image" id="4"><img src="Dummy billeder/nummer 4.png" width="100px"></div>
          <div draggable="true" class="image" id="5"><img src="Dummy billeder/nummer 5.png" width="100px"></div>
          <div draggable="true" class="image" id="6"><img src="Dummy billeder/nummer 6.png" width="100px"></div>
          <div draggable="true" class="image" id="7"><img src="Dummy billeder/nummer 7.png" width="100px"></div>
          <div draggable="true" class="image" id="8"><img src="Dummy billeder/nummer 8.png" width="100px"></div>
          <div draggable="true" class="image" id="9"><img src="Dummy billeder/nummer 9.png" width="100px"></div>
        </div>
        <div class="order" id="order"></div>
    <script src="gasflasker test.js"></script>
  </body>
</html>

But the better approach would be to move the whole boxes:

const $container = document.querySelector('.container');

const updateOrder = () => {
  document.getElementById('order').textContent = 'Order: ' + 
    [...document.querySelectorAll('.container .image')].map(img => img.id).join(', ');
};

updateOrder();

//DRAG AND DROP SWAP

var draggedImage = null;
var items;

function dragStart(e) {
    draggedImage = this;
    e.dataTransfer.effectAllowed="move";
}

function dragOver(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";
    return false;
}

function dragEnter(e) {
    this.classList.add("dragover"); 
}

function dragLeave(e) {
    this.classList.remove("dragover"); 
}

function drop(e) {
    e.stopPropagation();

    if (draggedImage != this) {
        const span = document.createElement('span');
        $container.insertBefore(span, draggedImage);
        $container.insertBefore(draggedImage, this.nextSibling);
        $container.insertBefore(this, span);
        span.remove();
        updateOrder();
    }
}

function dragEnd(e) {
    items.forEach(function(item) {
        item.classList.remove("dragover"); 
    });
}

document.addEventListener("DOMContentLoaded", event => {
    items = document.querySelectorAll(".container .image");

    items.forEach(function(item) {
        item.addEventListener("dragstart", dragStart);
        item.addEventListener("dragenter", dragEnter);
        item.addEventListener("dragover", dragOver);
        item.addEventListener("dragleave", dragLeave);
        item.addEventListener("drop", drop);
        item.addEventListener("dragend", dragEnd);
    });
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
    <style>
      .container {
          width: 330px;
          height: 330px;
          background-color: lightgrey;
          display: flex;
          flex-wrap: wrap;
      }
      .image {
        width: 100px;
        height: 100px;
        background-color: #fff5d7;
        text-align: center;
        line-height: 100px;
        margin: 5px;
        cursor: move;
      }
      .order {
        width: 330px;
        height: 50px;
        background-color: lightgrey;
        margin-top: 10px;
        text-align: center;
        line-height: 50px;
        font-size:x-large;
        font-family: Helvetica;
      }
  </style>
  </head>
  <body>
        <h1>Image re-ordering</h1>  
        <h2>Drag and drop to swap images</h2>
        <div class="container">
          <div draggable="true" class="image" id="1"><img src="Dummy billeder/nummer 1.png" width="100px"></div>
          <div draggable="true" class="image" id="2"><img src="Dummy billeder/nummer 2.png" width="100px"></div>
          <div draggable="true" class="image" id="3"><img src="Dummy billeder/nummer 3.png" width="100px"></div>
          <div draggable="true" class="image" id="4"><img src="Dummy billeder/nummer 4.png" width="100px"></div>
          <div draggable="true" class="image" id="5"><img src="Dummy billeder/nummer 5.png" width="100px"></div>
          <div draggable="true" class="image" id="6"><img src="Dummy billeder/nummer 6.png" width="100px"></div>
          <div draggable="true" class="image" id="7"><img src="Dummy billeder/nummer 7.png" width="100px"></div>
          <div draggable="true" class="image" id="8"><img src="Dummy billeder/nummer 8.png" width="100px"></div>
          <div draggable="true" class="image" id="9"><img src="Dummy billeder/nummer 9.png" width="100px"></div>
        </div>
        <div class="order" id="order"></div>
    <script src="gasflasker test.js"></script>
  </body>
</html>