JSFiddle - React, Tailwind, and code Playground

by David Buzatto

HTML

<div class="container">
    <div id="divQuadrado" class="quadrado"/>
</div>
<div id="log" class="log"/>

CSS

.container {
    position: relative;
    left: 0px;
    top: 0px;
    margin: 0px;
    width: 300px;
    height: 300px;
    background: #f00;
}

.quadrado {
    position: relative;
    left: 0px;
    top: 0px;
    width: 60px;
    height: 60px;
    background: #000;
    cursor: move;
}

.log{
    position: relative;
    left: 0px;
    top: 300px;
    height: 25px;
    background: #09c;
}

JavaScript

$( document ).ready( function(){
    
    var arrastando = false;
    var xInicial = 0;
    var yInicial = 0;
    
    $( "#divQuadrado" ).mousedown( function( evt ) {
        arrastando = true;
        xInicial = evt.screenX;
        yInicial = evt.screenY;
    });
    
    $( "#divQuadrado" ).mouseup( function() {
        arrastando = false;
    });
    
    $( "#divQuadrado" ).mouseleave( function() {
        arrastando = false;
    });
    
    $( "#divQuadrado" ).mouseout( function() {
        arrastando = false;
    });
    
    $( "#divQuadrado" ).mousemove( function( evt ) {
        
        if ( arrastando ) {
            
            // deslocamento
            var h = -1 * (xInicial - evt.screenX);
            var v = -1 * (yInicial - evt.screenY);
            
            // atualiza x e y iniciais.
            xInicial = evt.screenX;
            yInicial = evt.screenY;
            
            // obtém coordenada atual do quadrado
            var xAtual = Number( $( "#divQuadrado" ).css( "left" ).replace( "px", "" ) );
            var yAtual = Number( $( "#divQuadrado" ).css( "top" ).replace( "px", "" ) );
            
            // configura coordenada atual do quadrado
            $( "#divQuadrado" ).css( "left", xAtual + h );
            $( "#divQuadrado" ).css( "top", yAtual + v );
            
            // log...
            $( "#log" ).html( "x: " + ( xAtual + h ) + ", y: " + v );
            
        }
        
     });
    
});