我有一个应用程序(使用 JqueryUI.GridSort 进行拖放),它允许用户上传照片,然后使用拖放按照他们希望的顺序对照片进行排序。
在页面加载时,系统会提示用户上传发布到下一页的照片。当他们到达下一页时,我的 php 脚本会创建一个 <ul id="sortable">
包含 <li>
对于他们上传的每个文件。对于他们上传到网站的每张照片,一个新的 <li>
被 build 。在里面<li>
是 <img>
为 <li>
设置图片使用他们上传的图片。
我的目标是能够在拖放界面中对图片进行排列后“保存”图片的顺序。例如,一旦他们按照他们想要的顺序完成对图片的排列和排序,我希望能够向他们发送另一个创建 xml 文件的页面(我不需要 XML 方面的帮助,只需要保存顺序)使用他们以正确顺序创建的列表。
经过几个小时的 PHP 修改,我开始意识到因为 PHP 是一种服务器端语言,它无法看到渲染后排序的内容。所以我的问题是,有没有办法让 JavaScript 或 Ajax 读取列表的当前顺序,并将其发布到下一页?如果您确实知道怎么做,能否请您提供一个页面上的 POST 和另一页上的帖子接收示例?我对 Ajax 不是很熟悉。
非常感谢您提供的任何帮助。
示例代码(为每个上传的文件创建 LI 的 foreach 语句的内容)
$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
?>
最佳答案
我构建了一个 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();
}
}
关于javascript - 通过 JavaScript 读取拖放有序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17732641/