JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="demo">
    
</div>

CSS

div {
    width: 500px;
    height: 500px;
    margin:50px auto;
    background: red;
}

JavaScript

var a = document.querySelector('#demo');
a.addEventListener('mousedown',function(){
	this.classList.add('drag')
})
a.addEventListener('mouseup',function(){
	this.classList.remove('drag')
    a.removeEventListener('mousemove', x)
})
function x(e){
        	a.style.transform = 'translateX(' + (e.clientX / 10) + 'px)';
        };
var fn = function(){

	if(a.classList.contains('drag')){
    	a.addEventListener('mousemove',x)
    }


	requestAnimationFrame(fn)
}
	requestAnimationFrame(fn)