JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

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

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);