JSFiddle - React, Tailwind, and code Playground

HTML

<div class="draggableBox">1</div>

<div class="draggableBox">2</div>

<div class="draggableBox">3</div>

CSS

.draggableBox {
  position: absolute;
  width: 80px; height: 60px;
  padding-top: 10px;
  text-align: center;
  font-size: 40px;
  background-color: #222;
  color: #CCC;
  cursor: move;
}

JavaScript

(function dragDrop() {
	var element = document.querySelector('.draggableBox');
	var inTheBox;

	element.addEventListener('mousedown', function() {
		inTheBox = true;
	}, false)

	element.addEventListener('mouseup', function() {
		inTheBox = false;
	}, false)

	document.onmousemove = function(e) {	
		if(inTheBox) {
			element.style.left = e.clientX - (e.clientX - element.offsetLeft) +"px";
			element.style.top = e.clientY - (e.clientY - element.offsetTop) +"px";
		}
	}
})();