JavaScript Drag and Drop Swap Items

Question

I'm trying to create a simple drag & drop example to use that will allow swapping of items. For example:

Item 0 Item 1 Item 2 Item 3

If I drag and drop "Item 0" over "Item 3" they should swap places. What I have below does not swap the correct elements, will also make some slots "un-droppable" and error out due to e.dataTransfer not providing any data.

const log = console.log.bind(console);
const $ = document.getElementById.bind(document);

function drop(e) {
  e.preventDefault();
  let dragindex = 0;
  let clone = e.target.cloneNode(true);
  let data = e.dataTransfer.getData("text/plain");


  if (clone.dataset.id !== data) {

    [...$("container").children].forEach((el, i) => {
      if (el.dataset.id == data) {
        dragindex = +i;
      }
    })

    log(data, clone.dataset.id, dragindex, e.target.dataset.id);

    $("container").replaceChild(document.querySelector(`[data-id=${data}]`), e.target);
    $("container").insertBefore(clone, $("container").childNodes[dragindex]);
  }
}

[...document.querySelectorAll(".draggable")].map((el) => {
  el.setAttribute("draggable", true);
});

[...document.querySelectorAll(".draggable")].map((el) => {
  el.addEventListener("dragover", (e) => {
    e.preventDefault();
  })
  el.addEventListener("dragstart", (e) => {
    e.dataTransfer.setData("text/plain", e.target.dataset.id);
  });

  el.addEventListener("drop", (e) => {
    drop(e);
  });
})

#container {
    width: 200px;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    background: dodgerblue;
    color: #fff;
    transform: translate(-50%, -50%);
    border: 1px solid #000;
}

.draggable {
    display: flex;
    justify-content: start;
    align-items: center;
    border: 1px solid #fff;
    margin: 2px;
    padding: .5em;
    text-align: center;
    cursor: grab;
}

.draggable i {
    margin-right: 25px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div id="container">
  <div class="draggable" data-id="drag0"><i class="material-icons">drag_indicator</i>Draggable 0</div>
  <div class="draggable" data-id="drag1"><i class="material-icons">drag_indicator</i>Draggable 1</div>
  <div class="draggable" data-id="drag2"><i class="material-icons">drag_indicator</i>Draggable 2</div>
  <div class="draggable" data-id="drag3"><i class="material-icons">drag_indicator</i>Draggable 3</div>
</div>

Answer 1

So.... I finally cracked it. It was several things.

1. You have to re-add event listeners to a cloned node if they were added via "document.addEventListener()".

2. Had to use ".childNodes" not ".children" as the indexing does not work out the same.

3. Had to take care where/when I created the variable holding the reference node.

Also figured out that it acts weird in Safari on IOS if the drag/drop parent container is absolutely positioned so need to use flex positioning, as well as a few other minor details; any how, in case any one finds it helpful, here is the working code. Works in Android-Chrome/IOS-Safari.

const log = console.log.bind(console);
const $ = document.getElementById.bind(document);

function drop(e) {
  e.preventDefault();
  let dragindex = 0;
  let referenceNode = "";
  let clone = e.target.cloneNode(true);
  addListeners(clone);
  let data = e.dataTransfer.getData("text/plain");

  if (clone.dataset.id !== data) {
    [...$("container").childNodes].forEach((el, i) => {
      if (el.dataset?.id == data) {
        dragindex = i;
      }
    });

    $("container").replaceChild(
      document.querySelector(`[data-id=${data}]`),
      e.target
    );
    referenceNode = $("container").childNodes[dragindex];
    $("container").insertBefore(clone, referenceNode);
    clone.classList.remove("dragActive");
  }
}

function addListeners(el) {
  el.addEventListener("dragover", (e) => {
    e.preventDefault();
    e.target.classList.add("dragActive");
  });
  el.addEventListener("dragstart", (e) => {
    e.dataTransfer.setData("text/plain", e.target.dataset.id);
  });
  el.addEventListener("dragleave", (e) => {
    e.target.classList.remove("dragActive");
  });
  el.addEventListener("dragend", (e) => {
    e.target.classList.remove("dragActive");
  });
  el.addEventListener("drop", (e) => {
    e.target.classList.remove("dragActive");
    drop(e);
  });
}

[...document.querySelectorAll(".draggable")].map((el) => {
  el.setAttribute("draggable", true);
});

[...document.querySelectorAll(".draggable")].map((el) => {
  addListeners(el);
});

html,
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

#container {
    width: 200px;
    height: auto;
    background: dodgerblue;
    color: #fff;
    border: 1px solid #000;
    position: absolute;
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
}

.draggable {
    border: 1px solid #fff;
    margin: 2px;
    padding: .5em;
    text-align: center;
    cursor: grab;
    color: #000;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAzCAYAAAAdD7HCAAAACXBIWXMAAA7DAAAOwwHHb6hkAAADGElEQVRYhe1Zy2oUURA9MSoiWYQRxEdAMBoDxpVGZhFQF5qV+AgSPyK6CPgFbswvCD4WrkQQHwsFDUY3JuomISjic8CZhYk6PtCoUev07Rlm2p7uPj2TXR84zUxSValO31t16nYb6rHM2G/sMf40PjG+QGvQaTxo7DX+Nk4Z7xp/hBkfMr4y/g1w3LityURGjV9CYheMg0HjkRDDWpaNO1MmMhYTexHuH+Ghz/grxoF8aVwpJjKQIC45b8zR4VJCB/K4mMxVIfYJLtg9QvBBMZndgu1eJtMlOKyFhpxg28FkCoJDCRreCLZvmcwdweEmNFwTbK/wssW4gPgFNgNXFBXwMb1PEHui1mkY0du75CedBnnjx4jY08Z1QSfuqsmAIRO8DG2Rh2GT8SLqq3DReNq4umLUFuK42dgN1z+Y9TxaBxbN9X7sd8iQIcMSIWxrrzH2+p+foXVbm9V7l3GH/30WTnr+CTOmtGTvofKqLXrXjd1NJrLP/+PB6jvr/64OLNllNC7ZLOdpZecQolsNb/5YxbgDrvfENbOSb6uAPaecIPY32rbb5aTxaILATGTO+FBI5pTxQAK7FXCjER4guU69DQ1K7EmucEUabhCT6RRsPdn5VXD4AA1FwXZOlZ33oOGWYHuDF654rua4Z1pGiCKLQaqdStm5GGHMOjGEdOBBQpTs5E3mg05SlRSxFa6S1xY/3jwrfvVQIexIhFPgdv87J4LHaNA/UmCp+l6GDBnq0N7g5xvhGuh3uHrQKnBrs3T0+HHLjQw583L2ZXOrFCbOxufhZuVmwFmdM3tQ8XG2/+/kjD1nGo1LNotTPmUiPL2I6k9McLjWYQLxzYznLDkxEVb0mQSxF/ykPVmYVI2dEZM5LMQ+R4ezgsNTMZkLQmzvTE9ZnOqhkSJTu1TZ+RkaFNlZZDL3BYcpaFAkrXfIyB3CrZvkuQ6IyfDY7HWCuNzefRWnI4iWneQY0oFjcdxUORJ04nuBQoghq/AomgOl5XhIbL7fqr7eCcrOVcb9cEcXy+GkIUeIT2gNWNj6/djPjY9QlbTAPz6/t2nPvICTAAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: 5px;
    position: relative;
}

.dragActive {
    background: rgba(255, 255, 255, .25);
    color: #000;
    border: 1px solid #000;
}

<div id="container">
  <div class="draggable" data-id="drag0">Draggable 0</div>
  <div class="draggable" data-id="drag1">Draggable 1</div>
  <div class="draggable" data-id="drag2">Draggable 2</div>
  <div class="draggable" data-id="drag3">Draggable 3</div>
</div>