JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box"></div>

CSS

#box {
		background: orangered;
		width: 80px;
		height: 80px;
		position: absolute;
		cursor: move;
	}

JavaScript

var box = document.getElementById('box');
	var time = null;

	var oldX, oldY, newX, newY;


	box.onmousedown = function(e){
		var x = e.pageX - box.offsetLeft;
		var y = e.pageY - box.offsetTop;
		
	
	document.onmousemove = function(e){
	oldX = box.offsetLeft;
	oldY = box.offsetTop;

		box.style.left = e.pageX - x + "px";
		box.style.top  = e.pageY - y + "px";

		time = new Date;
	}
	}

	document.onmouseup = function(){
	
		newX = box.offsetLeft;
		newY = box.offsetTop;
		

		if(new Date - time <= 100){
			$("#box").animate({
				left: newX + (newX - oldX) + "px",
				top:  newY + (newY - oldY) + "px"
			});
		}
		document.onmousemove = function(){}
		console.log(oldX + " - " + newX);
	}