jQuery + UI Sortable + PHP: guardar orden

Script con jQuery + UI para guardar el nuevo orden de una lista en base de datos con PHP

by Riccal

HTML

<div id="sortable" class="tree-menu">
    <ul>
        <li id="1">Item ID 1
            <ul>
                <li id="35">Subitem ID 35</li>
                <li id="36">Subitem ID 36</li>
            </ul>
        </li>
        <li id="4">Item ID 4
            <ul id="4"></ul>
        </li>
        <li id="18">Item ID 18
            <ul id="28"></ul>
        </li>
        <li id="21">Item ID 21
            <ul id="21"></ul>
        </li>
    </ul>
</div>
<div id="result">Reordenar para obtener resultados...</div>

CSS

.ui-state-highlight { border: 1px solid #f9a837; background: #fff0a5; padding: 10px 0; }
#sortable li { cursor: move; }

.tree-menu label { font-weight: normal; }
.tree-menu ul { min-height: 10px; margin: 0 auto; list-style-type: none; }
.tree-menu > ul { padding: 0; }
.tree-menu li { padding-left: 18px; margin-bottom: 5px; }

JavaScript

$(function(){
    $( "#sortable ul" ).sortable({
        connectWith: '#sortable ul',
        placeholder: 'ui-state-highlight',
        distance: 5,
        update: function(event, ui){
            
            var newOrder = $(this).sortable('toArray').toString();
            var _parent = Number(ui.item[0].parentElement.id);
            var id_item = ui.item[0].id;
            if (!isNaN(_parent))
                id_parent = _parent;
            
            $("#result").html("Datos a enviar: order=" + newOrder + "&parent=" + id_parent + "&id=" + id_item)
            /* QUITAR COMENTARIOS PARA ENVIAR DATOS
            $.ajax({
                url: 'save.json.php?to=menu_order',
                data: 'order=' + newOrder + '&parent=' + id_parent + '&id=' + id_item,
                type: 'POST'
            });
            */
        }
    });
});