JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<div class='placeHolder'>
    <div class='dragable'>item 1</div>
    <div class='dragable'>item 2</div>
    <div class='dragable'>item 3</div>
</div>

CSS

.placeHolder{ border: 1px solid #cce; height: 300px; width: 150px; }
.dragable{  border: 1px solid #cce; background-color: #eef; }

JavaScript

$( ".dragable" ).draggable({ grid: [ 0,12 ], stack: "placeHolder div", distance: 24, containment: 'parent' });