JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="elem"></div>
    <div id="elem2"></div>
</div>

CSS

#container {
    width: 102px;
    height: 102px;
    border: 1px solid #000;
    background: #ffc;
    position: relative;
}

#container > div {
    width: 20px;
    height: 20px;
    border: 1px dotted #000;
    position: absolute;
}

#elem {
    left: 5px;
    background: #cfc;
}

#elem2 {
    left: 10px;
    top: 20px;
    background: #ccf;
}

JavaScript

$('#container > div').draggable({
    containment: '#container',
    drag: function(e, ui) {
        ui.position.left = Math.floor(ui.position.left / 10) * 100;
        ui.position.top = Math.floor(ui.position.top / 10) * 10;
    }
});