JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Sortable Example</h1>
<ul id="sortable">
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
    <li>Item #4</li>
    <li>Item #5</li>
</ul>

CSS

li {
    display: block;
    padding: 10px;
    margin: 0 0 5px 0;
    background: #EFEFEF;
    border: 1px solid #666;   
}

JavaScript

if (! console || ! console.log) {
    window.onerror = function(msg, url, num) {
        alert(msg)   
    }
}
    
$('#sortable').sortable({
    beforeStop: function(event, ui) {
        // Some custome logic to determine if this action is allowed or not
        $(this).sortable('cancel')
    }    
});