JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<div class="box"></div>

CSS

html, body{margin: 0px 0px 0px 0px;width:  100%;height:  100%;}

.box{
	width: 200px;
	height: 200px;
	position:  relative;
	background: #3F51B5;
	left: 10px;
	top: 10px;
	cursor:  pointer;
}

JavaScript

let box = document.querySelectorAll('.box')[0],canMove = false;
let capturePoint = {x : 0,y : 0};

box.addEventListener('mousedown',(e)=>{
	canMove = true,
	box.style.boxShadow = '3px 3px 20px 0px #000',
	capturePoint.x = e.layerX, capturePoint.y = e.layerY;
	window.addEventListener('mousemove',(e)=>{
		canMove ? (
			box.style.left = e.pageX-capturePoint.x+'px',
			box.style.top = e.pageY-capturePoint.y+'px'
		) : '';
	},false);
},false);

box.addEventListener('mouseup',()=> {
	box.style.boxShadow = '0px 0px 0px 0px #000',
	canMove = false
},false);