JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container" id="container">
		<div class="center" id="center">

		</div>
	</div>

CSS

* {
		margin: 0;
		padding: 0;
		list-style: none;
		box-sizing: border-box;
	}
	html, body {
		width: 100%;
		height: 100%;
	}
	.container {
		width: 100%;
		height: 100%;
		background-color: gray;
		position: relative;
	}
	.center {
		width: 400px;
		height: 400px;
		position: absolute;
		left: 0;
		top: 0;
		background-color: white;
	}

JavaScript

var center = document.getElementById("center");
	var intpos, increment = 0, lastpos, direction, oldx = 0;

	var mouseDown = 0;
	var numofclicks = 0;
	document.body.onmousedown = function() { 
		++mouseDown;
		++numofclicks;
	}
	document.body.onmouseup = function() {
		--mouseDown;
		lastpos = parseInt(center.style.left);
		if(direction == "left") {
			center.innerHTML = "LEFT";
		}
		else if(direction == "right") {
			center.innerHTML = "RIGHT";
		}
		

	}

	
	

	center.onmousedown = function(down) {
		intpos = down.screenX;

		center.onmousemove = function(Dmove) {
			increment = (Dmove.screenX - intpos);

			if(mouseDown & (numofclicks != 1)) {
				
				center.innerHTML = (lastpos + increment) + "px";
				center.style.left = (lastpos + increment) + "px";
				
			} 
			else if (mouseDown & (numofclicks == 1) ){
				
				center.innerHTML = increment + "px";
				center.style.left = increment + "px";
				
			}
			
			
			if (Dmove.pageX < oldx) {
				direction = "left"
			} else if (Dmove.pageX > oldx) {
				direction = "right"
			}
			
			oldx = Dmove.pageX;


			
		}
	}