JSFiddle - React, Tailwind, and code Playground

by Ravi Iyer

HTML

<div class="demo"> 
    <div id="sortable1" class="connectedSortable">
        <div id="item1" class="ui-state-default">Item 1</div>
        <div id="item2" class="ui-state-default">Item 2</div>
        <div id="item3" class="ui-state-default">Item 3</div>
        <div id="item4" class="ui-state-default">Item 4</div>
        <div id="item5" class="ui-state-default">Item 5</div>
    </div>
    <div id="sortable2" class="connectedSortable">
        <div id="item6" class="ui-state-highlight">Item 6</div>
        <div id="item7" class="ui-state-highlight">Item 7</div>
        <div id="item8" class="ui-state-highlight">Item 8</div>
        <div id="item9" class="ui-state-highlight">Item 9</div>
        <div id="item10" class="ui-state-highlight">Item 10</div>
    </div>
</div>


<div class="sortable1 list"></div>
<div class="sortable2 list"></div>

CSS

#sortable1, #sortable2 {
    margin: 0; 
    padding: 0;
    float: left; 
    margin-right: 10px; 
    min-width: 100px;
    min-height: 100px;
    border: 1px solid green;
}    
#sortable1 div, #sortable2 div { 
    margin: 0 5px 5px 5px; 
    padding: 5px; 
    font-size: 1.2em; 
    width: 120px; 
    border: 1px solid red;
    cursor: move;
}
.sortable1.list, .sortable1.lis { 
    clear:both;
}

JavaScript

$( "#sortable1, #sortable2" ).sortable({
    connectWith: ".connectedSortable",
    stop: function(event, ui) {
        $('.connectedSortable').each(function() {
            result = "";
            $(this).find("div").each(function(){
                result += $(this).text() + ",";
            });
        });
    }
});