JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div id="box-1" class="box">Box 1</div>
<div id="box-2" class="box">Box 2</div>
<div id="box-3" class="box">Box 3</div>
</div>

CSS

.box {
    background:red;
    width:50px;
    height:50px;
    border:black 1px solid;
    position:absolute;
}
#box-2 {
    left:35px;top:35px; /* NOT aligned with grid */
}
#box-3 {
    left:65px;top:65px; /* NOT aligned with grid */
}

#container {
    border:solid blue 1px;
    width:100%;height:200px;
    position:absolute;
    background:whitesmoke url('https://s3.amazonaws.com/com.appgrinders.test/images/grid_20.png') repeat;
}

JavaScript

$('#box-1').draggable({
    grid: [ 20,20 ] 
});
$('#box-2').draggable({
    grid: [ 20,20 ] 
});

var isDraggable = false;
$('#box-3').mousedown(function(e){

    console.log('MOUSE DOWN');
    
    if (isDraggable == false) {
        var $this = $(this);
        
        // Reposition to nearest grid position:
        currentX = parseInt($this.css('left'));
        currentY = parseInt($this.css('top'));
        nearestGridX = Math.round(currentX/20) * 20;
        nearestGridY = Math.round(currentY/20) * 20;
        $this.css({left:nearestGridX+'px',top:nearestGridY+'px'});
        
        // Turn yellow:
        $this.css({background:'yellow'});

        // Make draggable:
        isDraggable = true;
        $this.draggable({
                grid: [ 20,20 ],
                start: function( event, ui ) {
                    console.log('START');
                }  
        });
        $this.trigger("mousedown");
    }
    
});