JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
  <div class='dot'><div class='num'>0</div></div>
</div>

CSS

.container {
  user-select: none;
  background-color: gray;
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
}

.dot {
  border-radius: 100%;
  background-color: red;
  padding: 2em;
  margin: -4em 0 0 -4em;
  position: absolute;
  top: 3em;
  left: 3em;
  color: blue;
}
.dot div {
  font-weight: bold;
  color: black;
  background-color: yellow;
  padding: 2em;
}

JavaScript

var eContainer = document.querySelector('.container'),
    eDot = document.querySelector('.dot'),
    dragActive = false,
    val = 0;

var hInterval = setInterval(function() {
	++val;
	eDot.innerHTML = '<div class="num">' + val + '</div>';
}, 1000);

eContainer.addEventListener('touchstart', dragStart);
eContainer.addEventListener('touchend', dragEnd);
eContainer.addEventListener('touchmove', dragMove);

eContainer.addEventListener('mousedown', dragStart);
eContainer.addEventListener('click', dragEnd);
eContainer.addEventListener('mousemove', dragMove);

function dragStart(e) {
	dragActive = true;
}

function dragMove(e) {
	if (!dragActive) return;
  
  var posX = e.clientX || (e.touches && e.touches.length ? e.touches[0].pageX : 0),
  		posY = e.clientY || (e.touches && e.touches.length ? e.touches[0].pageY : 0);
      
  eDot.style.left = posX + 'px';
  eDot.style.top = posY + 'px';
}

function dragEnd(e) {
	dragActive = false;
}