JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<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 = $('.container'),
    eDot = $('.dot'),
    dragActive = false,
    val = 0;

var hInterval = setInterval(function() {
	++val;
	var newHTML = $('<div class="num">' + val + '</div>');
  //newHTML.on('mousemove touchmove', dragMove);
	eDot.html(newHTML);
}, 1000);

eContainer.on('mousedown touchstart', dragStart);
eContainer.on('click touchend', dragEnd);

eContainer.on('mousemove touchmove', dragMove);
//eContainer.on('mousemove touchmove', '.num', dragMove);
//eContainer[0].addEventListener('touchmove', dragMove, true);

function dragStart(e) {
	dragActive = true;
}

function dragMove(e) {
	if (!dragActive) return;
  
  if (e.originalEvent) e = e.originalEvent;

  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.css({left: posX + 'px'});
  eDot.css({top : posY + 'px'});
}

function dragEnd(e) {
	dragActive = false;
}