JSFiddle - React, Tailwind, and code Playground

HTML

<div id="demo">



</div>

<div id="sidebar">

    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    
</div>

CSS

#demo {
    width: 500px;
    height: 500px;
    border: 1px solid black;
    float: left;
}
#draggable {
    background: red;
    width: 50px;
    height: 50px;
}
#sidebar {
    float: left;
    width: 300px;
}
.item {
    cursor: pointer;
    background: black;
    width: 100px;
    height: 100px;
    margin: 10px;
}

JavaScript

jQuery(".item").draggable({ appendTo: "#demo", grid: [ 10, 10 ], containment: "#demo" });