Ich habe eine Anwendung (Drag & Drop mit JqueryUI.GridSort), mit der der Benutzer Fotos hochladen und anschließend die Fotos in der Reihenfolge sortieren kann, in der sie per Drag & Drop abgelegt werden sollen.

Beim Laden der Seite wird der Benutzer aufgefordert, Fotos hochzuladen, die auf der nächsten Seite veröffentlicht werden. Wenn sie auf der nächsten Seite ankommen, erstellt mein PHP-Skript eine<ul id="sortable"> enthält<li> für jede hochgeladene Datei. Für jedes Bild, das sie auf die Site hochgeladen haben, ein neues<li> geschaffen. Innerhalb davon<li> ist ein<img> das gibt das bild für<li> mit dem Bild, das sie hochgeladen haben.

Mein Ziel ist es, die Reihenfolge der Bilder "speichern" zu können, nachdem sie in der Drag & Drop-Oberfläche angeordnet wurden. Wenn sie beispielsweise die Bilder in der gewünschten Reihenfolge angeordnet und sortiert haben, möchte ich ihnen eine weitere Seite senden können, auf der eine XML - Datei erstellt wird (ich brauche keine Hilfe mit XML, sondern speichere nur die Reihenfolge) mit der Liste, die sie in der richtigen Reihenfolge erstellt.

Nach stundenlangem Basteln mit PHP wurde mir klar, dass PHP, da es sich um eine serverseitige Sprache handelt, nicht erkennen kann, was nach dem Rendern sortiert ist. Meine Frage ist also, gibt es eine Möglichkeit, JavaScript oder Ajax die aktuelle Reihenfolge der Liste lesen und auf der nächsten Seite veröffentlichen zu lassen? Wenn Sie wissen wie, können Sie bitte ein Beispiel für die POST von einer Seite und die Post, die auf der anderen Seite eingeht, angeben? Ich kenne Ajax nicht sehr gut.

Vielen Dank für Ihre Unterstützung.

Beispielcode (Der Inhalt der foreach-Anweisung, die für jede hochgeladene Datei eine LI erstellt.)

 $imgID++;


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

BEARBEITEN

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

?>