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>
<div id="sortable">
    <img id="image_image1" src="http://placehold.it/100x100" />
    <img id="image_image2" src="http://placehold.it/100x100" />
    <img id="image_image3" src="http://placehold.it/100x100" />
    <img id="image_image4" src="http://placehold.it/100x100" />
    <img id="image_image5" src="http://placehold.it/100x100" />
    <img id="image_image6" src="http://placehold.it/100x100" />
    <img id="image_image7" src="http://placehold.it/100x100" />
    <img id="image_image8" src="http://placehold.it/100x100" />
</div>


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

CSS

li { cursor:pointer; }
img { display:inline-block; margin: 5px; }

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);
    }
});