Tengo una aplicación (arrastrar y soltar usando JqueryUI.GridSort) que permite al usuario cargar fotos y luego ordenar las fotos en el orden en que les gustaría usar arrastrar y soltar.

En la carga de la página, se le solicita al usuario que cargue las fotos que se publican en la página siguiente. Cuando llegan a la página siguiente, mi script php crea un<ul id="sortable"> que contiene<li> Para cada uno de los archivos que subieron. Para cada imagen que han subido al sitio, una nueva<li> es creado. Dentro de eso<li> es un<img> que establece la imagen para<li> Con la imagen que han subido.

Mi objetivo es poder "guardar" el orden de las imágenes después de haberlas colocado en la interfaz de arrastrar y soltar. Por ejemplo, una vez que hayan terminado de organizar y ordenar las imágenes en el orden en que las quieren, me gustaría poder enviarles otra página que cree un archivo xml (no necesito ayuda con el XML, solo guardar el orden) con el uso de la lista que crearon en el orden correcto.

Después de horas de juguetear con PHP, me he dado cuenta de que, debido a que PHP es un idioma del lado del servidor, no puede ver lo que está ordenado después del procesamiento. Entonces, mi pregunta es, ¿hay alguna forma de que JavaScript o Ajax lean el orden actual de la lista y lo publiquen en la página siguiente? Si sabe cómo hacerlo, ¿podría proporcionar un ejemplo del POST de una página y de la recepción de la otra? No estoy muy familiarizado con el Ajax.

Muchas gracias por la ayuda que pueda proporcionar.

Código de muestra (el contenido de la declaración foreach que crea un LI para cada archivo cargado)

 $imgID++;


echo '<li class="ui-state-default"><img id="'.$imgID.'"'.' src="user_files/'.$file_name.'" draggable="true" height="90" width="95"></li>';

EDITAR

main page :


<script>
$('#my_form').on('submit', function() {
    var ordered_list = [];
    $("#sortable li img").each(function() {
        ordered_list.push($(this).attr('id'));
    });
    $("#ordered_list_data").val(JSON.stringify(ordered_list));
});
</script>
<div id="tesT">
<form id="my_form" action="update_data.php">
    <!-- other fields -->
    <input type="hidden" id="ordered_list_data"></input>
    <input type="submit" value="Proceed to Step 2"></input>
</form>
</div>


update_data.php:

<?php
    // process other fields as normal
    if(isset($_POST['ordered_list_data'])) {
        $img_ordering = json_decode($_POST['ordered_list_data']);
echo "1";
    } else {
       echo "nodata";
    }
    // do things with the data

?>