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 ] 
});

// Custom grid
$('#box-3').draggable({
    drag: function( event, ui ) {
        var snapTolerance = $(this).draggable('option', 'snapTolerance');
        var topRemainder = ui.position.top % 20;
        var leftRemainder = ui.position.left % 20;
        
        if (topRemainder <= snapTolerance) {
            ui.position.top = ui.position.top - topRemainder;
        }
        
        if (leftRemainder <= snapTolerance) {
            ui.position.left = ui.position.left - leftRemainder;
        }
    }  
});