JSFiddle - React, Tailwind, and code Playground

CSS

.display_object {
  position: absolute;
  border: thin solid black;
  width: 15cm;
  white-space: nowrap;
}

.display_object:active::before {
  content: "x,y";
  /*needs to be changed to actual values*/
  display: block;
  position: absolute;
  background: rgba(0, 0, 0, 0.48);
  padding: 1em 3em;
  color: white;
  font-size: .8em;
  bottom: 1.6em;
  left: -1px;
  white-space: nowrap;
}

JavaScript

var mousePosition;
		var offset = [0, 0];
		var div;
		var isDown = false;

		div = document.createElement("div");

		div.className = "display_object";
		div.innerHTML = "Draggable box:  ";

		document.body.appendChild(div);

		div.addEventListener('mousedown', function(e) {
		  isDown = true;
		  offset = [
		    div.offsetLeft - e.clientX,
		    div.offsetTop - e.clientY
		  ];
		}, true);

		document.addEventListener('mouseup', function() {
		  isDown = false;
		}, true);

		document.addEventListener('mousemove', function(event) {
		event.preventDefault();
		if (isDown) {

		  mousePosition = {

		    x: event.clientX,
		    y: event.clientY

		  };

		  div.style.left = (mousePosition.x + offset[0]) + 'px';
		  div.style.top = (mousePosition.y + offset[1]) + 'px';


		}
		}, true)
		;