JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="draggables">
    <div id="drag1">A</div>
    <div id="drag2"></div>
    <div id="drag3"></div>
</div>

<div id="sortable1" class="sorting">
    <div id="sort11"></div>
    <div id="sort12"></div>
    <div id="sort13"></div>
</div>

<div id="sortable2" class="sorting">
    <div id="sort21"></div>
    <div id="sort22"></div>
    <div id="sort23"></div>
</div>

CSS

#draggables, #sortable1, #sortable2 {
    width: 190px;
    margin-bottom: 20px;
}
#draggables {
    padding: 10px;
    background-color: red;
}

#sortable1 {
    padding: 10px;
    background-color: blue;
}

#sortable2 {
    padding: 10px;
    background-color: green;
}

.sorting div, #draggables div {
    display: inline-block;
    width: 50px;
    height: 50px;
        
    margin-right: 10px;
    background-color: gray;
}

.sorting > div:last-child, #draggables > div:last-child{
    margin-right: 0;
}

.sorting > div.ui-sortable-helper {
    background-color: orange;
}

#draggables > div.ui-draggable-dragging {
    background-color: purple;
}

JavaScript

$(function () {
    $("#draggables div").draggable({
        helper: "clone",
        connectToSortable: ".sorting"
    });
    
    $(".sorting").sortable({
        connectWith: ".sorting", 
        helper: "clone"
    });
});