Tengo una lista en mi sitio web. Estoy usando el tutorial ordenable de jQuery para dar a los usuarios la capacidad de cambiar el orden de los elementos de la lista.

http: //jqueryui.com/demos/sortable

El truco es que me gustaría capturar el orden de los elementos inmediatamente después de un recurso y asignar los valores de orden a los elementos de formulario ocultos que se pasarían a mi servidor a través de un formulario de envío donde podría usar un script php para guardar el nuevo orden de elementos en una base de datos.

Aquí está el código fuente de la demostración:

 <style>
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
    #sortable li span { position: absolute; margin-left: -1.3em; }
    </style>
    <script>
    $(function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    });
    </script>


<div class="demo">

<ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

</div><!-- End demo -->

Y sé que también es posible asignar una función de devolución de llamada que se activa cuando se detiene la clasificación:

$( ".selector" ).sortable({
   stop: function(event, ui) { ... }
});

¡Gracias