JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<div id=inbound class=sort>
<ul>
    <li> <b>mandatory</b></li>
    <li class=inbound>Inbound Item 1</li>
        <li class=inbound>Inbound Item 2</li>
        <li class=inbound>Inbound Item 3</li>
</ul>
</div>
<div class=sort id=pending>
    <b>current</b>
    <ul>
        <li>Pending Item 1</li>
        <li>Pending Item 2</li>
    </ul>
</div>

CSS

div.sort{
    border:1px solid black;
    display:inline;
    width:175px;
    height:200px;
    float:left;
}
ul{
    height:200px;
    width:175px;
}

JavaScript

$(document).ready(function () {
    $('div.sort li').disableSelection();
        
        $('#pending ul').sortable({
        revert: 'invalid',
            connectWith: "#inbound ul, #outbound ul",
items: "li.inbound"
    });
    
            $('#outbound ul').sortable({
        revert: 'invalid',
            connectWith: "#inbound ul, #pending ul",
                items: "li.inbound"
    });
    
    $('#inbound ul').sortable({
        revert: 'invalid',
        connectWith: "#pending ul, #outbound ul",
        items: "li.inbound"
    });

});