JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<div style="height:100px;overflow:hidden;position:relative" id="carousel">
<div style="position:relative">op 1</div>
<div style="position:relative">op 2</div>
<div style="position:relative">op 3</div>
<div style="position:relative">op 4</div>
<div style="position:relative">op 5</div>
<div style="position:relative">op 6</div>
<div style="position:relative">op 7</div>
<div style="position:relative">op 8</div>
<div style="position:relative">op 9</div>
<div style="position:relative">op 10</div>
</div>

JavaScript

let dragged;
let mouseDown = false;

document.addEventListener("mousedown", (event) => {
    mouseDown = true;
});

document.addEventListener("mouseup", (event) => {
    mouseDown = false;
});

document.getElementById("carousel").addEventListener("mousemove", (event) => {
event.preventDefault();
if(mouseDown)
{
// store a ref. on the dragged elem
  dragged = event.target.parentNode.querySelectorAll("div");

  for (const node of dragged) {
  let position = parseFloat(node.style.top || 0);
  if(event.movementY > 0)
{  
    position = position - 1 + "px";
}
else{
    position = position + 1 + "px";
}
    node.style.top = position;
}
  }
});