JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css">
<div class="demo">
    <button>get Serial String</button>
    <br>
    <br>
    <div id="sortable">
        <div id="col-1" class="column ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</div>
        <div id="col-2" class="column ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</div>
        <div id="col-3" class="column ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</div>
        <div id="col-4" class="column ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</div>
        <div id="col-5" class="column ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</div>
    </div>
    
</div>

CSS

div.column {
    padding: 0 25px;
}
div.column span {
    margin-left:-1.3em;
    position:absolute;
}

JavaScript

$(function() {
    $("#sortable").sortable({
        revert: true,
        scroll: true,
        appendTo: 'body',
        connectWith: '.column',
        delay:200,
        stop: function(){ $(':button').trigger('click') },
        revertDuration:50000,
        scope:'scope',
        opacity: 0.80,
    });
    
    $(':button').click(function(){
        var string = $("#sortable").sortable("serialize");
        alert( string);
    })
        
});