JSFiddle - React, Tailwind, and code Playground

HTML

<div class="drop-target">
    <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

.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;
    background:whitesmoke url('https://s3.amazonaws.com/com.appgrinders.test/images/grid_20.png') repeat;
    
}

JavaScript

$(function() {
    $(".drag-item").draggable({
        grid: [20, 20]
    });
    $(".outside-drag-item").draggable({
        grid: [20, 20],
        helper:"clone"
    });
    $(".drop-target").droppable({
		accept: ".drag-item"
    });
});