JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="sortable"><li>PrvnĂ­
        <ul>
    <li id="e-1" class="ui-state-default"><span class="date">22.05.2011</span> - Person 1</li>
    <li id="e-2" class="ui-state-default"><span class="date">22.06.2011</span> - Person 2</li>
    <li id="e-3" class="ui-state-default"><span class="date">22.07.2011</span> - Person 3</li>
</ul>
</li>
<div id="output"></div>

CSS

ul li{
    background:#eee;
    padding:10px;
    border:1px solid #585858;
    margin:10px;
}

JavaScript

$("#sortable ul, #sortable li").sortable({
    start: function(event, ui) {
        //collection of date spans
        var oldDates = $(".date");
        var dates = [];
        for (i = 0; i < oldDates.length; i++) {
            /* TESTING ARRAY "DATES" */
            dates[i] = $(oldDates[i]).text();
            $("#output").append(dates[i] + "<br>");
        }
    },
    update: function(event, ui) {
        //handle new element order
        newPos = $(this).sortable('toArray');
                        for(i=0;i<newPos.length;i++){
                            $("#output").append(newPos[i]+"<br>");
                        }
    }
});