JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<ul id="sortable">
    <li data-post-id="1">Post 1</li>
    <li data-post-id="2">Post 2</li>
    <li data-post-id="3">Post 3</li>
    <li data-post-id="4">Post 4</li>
    <li data-post-id="5">Post 5</li>
    <li data-post-id="6">Post 6</li>
    <li data-post-id="7">Post 7</li>
</ul>

<p id="console"></p>

CSS

li { margin:5px; padding:5px; background:#ccc; cursor:move; }
li:hover { background:#bbb; }
li:active { background:#999; }

JavaScript

$(document).ready(function() {
   
    $('#sortable').sortable({
        update: function(event, ui) {

            $('#console').html('<b>posts[id] = pos:</b><br>');
            
            $('#sortable').children().each(function(i) {
                var id = $(this).attr('data-post-id')
                    ,order = $(this).index() + 1;
                
                // Instead of echoing this, build a real array
                $('#console').html($('#console').html() + 'posts[' + id + '] = ' + order + '<br>');
                
                // Then do an ajax request to send the array
                // Update order fields from posts in db
                /*
                $.ajax('url', {
                    data: //posts array
                });
                */
            });

        }
    }); 
    
});