JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="drag">
<li>drag me then don't drop me on sortable items</li>
</ul>
<br/><br/>
<ul class="sort">
    <li>sort me when revert is in action</li>
    <li>sortable 2</li>
    <li>sortable 3</li>
    <li>sortable 4</li>
</ul>

CSS

.ph {
    background-color: green;
    height: 20px;
}

JavaScript

$(document).ready(function() {
    
    
    $('.drag > li').draggable({
        revert : 'invalid',
        revertDuration : 10000,
        connectToSortable : '.sort'
    });
    
    
    $('.sort').sortable({
        placeholder : "ph"
    });
            
});