JSFiddle - React, Tailwind, and code Playground

by Slezi

HTML

<div id="toolbar">

</div>
<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>
<button>StickToGrid</button>

CSS

.box {
    background: red;
    width: 50px;
    height: 50px;
    border: black 1px solid;
    /*position: absolute;*/
}

#toolbar {
  border-style: solid;
  border-color: #000000;
  border-width: thin;
  width: 350px;
  height: 100px;
  margin-right: 3px;
}

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

JavaScript

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

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