通过JavaScript读取拖放顺序列表

Question

我有一个应用程序（使用JqueryUI.GridSort拖放），该应用程序允许用户上传照片，然后按照他们希望使用拖放的顺序对照片进行排序。

在页面加载时，系统会提示用户上传已发布到下一页的照片。当他们的下一个页面上到达我的PHP脚本创建一个<ul id="sortable">包含<li>每个他们上载的文件。对于他们上传到站点的每张图片，都会<li>创建一个新图片。其内部<li>是一个<img>用于为其<li>上载图像的图片。

我的目标是在将图片排列在拖放界面后，能够“保存”图片的顺序。例如，一旦他们按照想要的顺序完成了对图片的排列和排序后，我希望能够向他们发送另一个创建xml文件的页面（我不需要XML的帮助，只保存了订单），并使用他们以正确顺序创建的列表。

经过数小时的PHP修改后，我意识到由于PHP是一种服务器端语言，因此它看不到渲染后的排序。所以我的问题是，有没有办法让JavaScript或Ajax读取列表的当前顺序，并将其发布到下一页？如果您知道如何做，请提供一个示例，其中一个页面的POST，另一个页面的接收？我对Ajax不太熟悉。

非常感谢您提供的任何帮助。

示例代码（foreach语句的内容，该语句为上载的每个文件创建一个LI）

 $imgID++;


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

编辑

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

?>

Answer 1

我建立了一个JSFiddle，基本上执行了David发布的相同操作。

我添加了一块代码，将结果写到页面上的div上，因此您可以看到发生了什么：

<input type="button" id="savebutton" value="save"/>
<div id="output"></div>
<form id="listsaveform" method="POST" action="script.php">
    <input type="hidden" name="list" id="hiddenListInput" />
</form>

Javascript：

$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
$( "#savebutton" ).click(function() { LISTOBJ.saveList(); });
});

var LISTOBJ = {
    saveList: function() {
        var listCSV = "";
        $( "#sortable li" ).each(function() {
            if (listCSV === "") {
                listCSV = $(this).text();
            } else {
                listCSV += "," + $(this).text();
            }
            $("#output").text(listCSV);
            $("#hiddenListInput").val(listCSV);
            //$("#listsaveform").submit();
        });
    }
}