JSFiddle - React, Tailwind, and code Playground

HTML

<div class="affix" id="draggables">
<div class="draggable ui-draggable" data-widgetid="1" id="widget_1">Widget 1</div>
<div class="draggable ui-draggable" data-widgetid="2" id="widget_2">Widget 2</div>
<div class="draggable ui-draggable" data-widgetid="3" id="widget_3">Widget 3</div>
</div>
<div class="sortable-list">
    
</div>
<div class="sortable-list">
    
</div>
<div class="sortable-list">
    
</div>
<div class="sortable-list">
    
</div>


<div class="sortable-list">
    <div class="draggable ui-draggable" style="display: block;" data-widgetid="2">Widget 2</div>
</div>

CSS

.sortable-list {
    height:100px;
    border:1px solid #000;
    margin-bottom:20px;
}

JavaScript

$("#draggables .draggable").draggable({
            connectToSortable: '.sortable-list',
            helper: "clone",
            revert: 'invalid'
        });
$('.sortable-list').sortable({
            connectWith: '.sortable-list',
            placeholder: 'placeholder',
            cursor: "move",
            forceHelperSize: true,
    over:function() {
     console.log('over');   
    },out:function() {console.log('out');}
});