JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="overflowContainer">
<div class="left">
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="clearfix"></div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="clearfix"></div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="clearfix"></div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="clearfix"></div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="clearfix"></div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="clearfix"></div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="clearfix"></div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="clearfix"></div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="left grid">
</div>
<div class="clearfix"></div>
<div class="left grid">
...
CSS
.overflowContainer {
width: 600px;
height: 500px;
overflow-y: scroll;
}
.left {
float: left;
}
.grid {
width: 128px;
height: 108px;
background-color: #ccc;
border: 1px solid black;
}
.clearfix {
clear: both;
}
.dragcontainer {
position:absolute;
top: 8px;
left: 8px;
}
.dragItem {
width: 50px;
height: 50px;
background-color: cyan;
}
JavaScript
$(function() {
$(".dragItem").draggable({
grid: [130, 110],
});
});