JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <div id="a"></div>
  <div id="b"></div>
  <div id="c"></div>
</nav>

CSS

nav {
  display: flex;
  gap: 10px;
}

div {
  height: 30px;
  width: 100px;
  user-select: none;
}

#a { background: grey; }
#b { background: red; }
#c { background: blue; }

JavaScript

const divs = Array.from(document.querySelectorAll("div"));
console.log(divs);



const slider = document.getElementById("a");

function beginSliding(e) {
  slider.onpointermove = slide;
  slider.setPointerCapture(e.pointerId);
}

function stopSliding(e) {
  slider.onpointermove = null;
  slider.releasePointerCapture(e.pointerId);
}

function slide(e) {
  const ele = document.elementFromPoint(e.clientX, e.clientY);
	document.insertBefore(slider, ele)
  //slider.style.transform = `translate(${e.clientX - 70}px)`;
}

slider.onpointerdown = beginSliding;
slider.onpointerup = stopSliding;