JSFiddle - React, Tailwind, and code Playground

HTML

<div class="drop-target" style="background-color:#fff">
    <div class="drag-item">Drag me</div>
    <div class="drag-item" style="left:87px;top:87px;">Drag me</div>
</div>
<div class="outside-drag-item">Drag me</div>

CSS

.gridlines {
    display: none;
    position:absolute;
    background-color:#ccc;
}
.drag-item, .outside-drag-item {
    position:absolute;
    background:red;
    width:50px;
    height:50px;
    cursor:move;
}
.drop-target {
    position:absolute;
    left:100px;
    top:100px;
    width:300px;
    height:300px;
    border:dashed 1px orange;
}

JavaScript

$(function () {
    $(".drag-item").draggable({
        snap: '.gridlines'
    });
    $(".outside-drag-item").draggable({
        snap: '.gridlines',
        helper: "clone"
    });
    $(".drop-target").droppable({
        accept: ".drag-item"
    });
});

function createGrid(size) {
    var i,
    sel = $('.drop-target'),
        height = sel.height(),
        width = sel.width(),
        ratioW = Math.floor(width / size),
        ratioH = Math.floor(height / size);

    for (i = 0; i <= ratioW; i++) { // vertical grid lines
      $('<div />').css({
            'top': 0,
            'left': i * size,
            'width': 1,
            'height': height
      })
        .addClass('gridlines')
        .appendTo(sel);
    }

    for (i = 0; i <= ratioH; i++) { // horizontal grid lines
      $('<div />').css({
            'top': i * size,
            'left': 0,
            'width': width,
            'height': 1
      })
        .addClass('gridlines')
        .appendTo(sel);
    }

    $('.gridlines').show();
}

createGrid(20);