JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://s3-eu-west-1.amazonaws.com/isdcloud/jquery/jquery-ui-1811min.js"></script> 
<div class="demo">
    

<ul id="sortable">
    <li id="page_1" class="ui-state-default">Item 1</li>
    <li id="page_2" class="ui-state-default">Item 2</li>
    <li id="page_3" class="ui-state-default">Item 3</li>
    <li id="page_4" class="ui-state-default">Item 4</li>
    <li id="page_5" class="ui-state-default">Item 5</li>
</ul>

</div><!-- End demo -->

CSS

.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
.demo li { margin: 5px; padding: 5px; width: 150px; }

JavaScript

$(function() {
     $("#sortable").sortable({
    update: function(event, ui) {
    
        
        // i need to get the class text that is being dragged i.e 
        var order = $(this).sortable("serialize");
       
        alert(order);
       
        
    }
    });
});