JSFiddle - React, Tailwind, and code Playground

by Ahmad Sharif

HTML

<div id="move" >XXXX</div>

CSS

div {
    width:50px;
    height:50px;
    border:1px solid;
    position:absolute
}

JavaScript

var m = document.getElementById('move');
m.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);

function mouseUp() {
    window.removeEventListener('mousemove', move, true);
}

function mouseDown(e) {
    window.addEventListener('mousemove', move, true);
}

function move(e) {
    m.style.top = e.clientY + 'px';
    m.style.left = e.clientX + 'px';
};