JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<ul id="sortable">
    <li id="pic_image1">image1.jpg</li>
    <li id="pic_image2">image2.jpg</li>
    <li id="pic_image3">image3.jpg</li>
    <li id="pic_image4">image4.jpg</li>
</ul>

<div id="data"></div>

CSS

li { cursor:pointer; }

JavaScript

// Make the elements in #sortable sortable.
$("#sortable").sortable({
    // code to run when the order is updated
    update: function(event, ui) {
        // get the order of the items in the list
        var data = $(this).sortable('serialize');
        // pass the data back to your server for processing
        $('#data').html(data);
    }
});