JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<div id="mf">
Motherfucker! <p id="state"></p>
</div>

CSS

div{
    display: block;
    background: purple;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    position: absolute;
    color: white;
    font-family: helvetica, arial, sans-serif;
    font-weight: lighter;
    font-size: 18px;
}
p{
    position: absolute;
    bottom: 19px;
    left: 18px;
}

JavaScript

(function(doc){

	var element = doc.getElementById('mf'),
    	elementActivity = false;
        doc.getElementById('state').innerHTML = elementActivity;
    
    element.addEventListener('mousedown',function(e){
    	elementActivity = true;
        doc.getElementById('state').innerHTML = elementActivity;
        var elementLeft = element.offsetLeft,
        	elementTop = element.offsetTop,
            eventLeft = e.pageX,
            eventTop = e.pageX;
        
        
        document.onmousemove = function(eMove){
        	if( elementActivity ){
                var eMoveX = eMove.pageX,
                    eMoveY = eMove.pageY;
                element.style.top = eMoveY+'px';
                element.style.left = eMoveX+'px';
            }
        }
        	
        
        
    });
    
    document.addEventListener('mouseup',function(){
    	elementActivity = false;
        doc.getElementById('state').innerHTML = elementActivity;
    });

})(document);