JSFiddle - React, Tailwind, and code Playground

by flarrow

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Swipe</title>
</head>
<body>
  <h1 class='h1'>OPEN MOBILE VIEW IN DEVTOOLS</h1>
  <div class="container">
    <div class='movable-block'>
      <span class="movable-block__title">Movable block</span>
      <div class="movable-block__line"></div>
    </div>
  </div>
</body>
</html>

CSS

h1 {
  position: absolute;
  opacity: 0.1;
  z-index: -1;
  top: 25%;
}
.container {
  padding-top: 25px;
  height: 1000px;
}
.movable-block {
  position: absolute;
  left: 500px;
  width: fit-content;
}
.movable-block__title {
  color: #fff;
  padding: 25px;
  background-color: red;
  border: 1px solid black;
}
.movable-block__line {
  margin: 0 auto;
  background-color: red;
  width: 5px !important;
  height: 1000px;
}

JavaScript

const container = document.getElementsByClassName('container')[0];
const movableBlock = document.getElementsByClassName('movable-block')[0];
container.addEventListener('touchstart', () => {
	container.addEventListener('touchmove', (event) => {
  	movableBlock.style.left = event.touches[0].pageX - movableBlock.offsetWidth / 2 + 'px';
  });
});