閱讀通過JavaScript拖放有序列表

Question

我有一個應用程序（使用JqueryUI.GridSort拖放），允許用戶上傳照片，然後按照他們想要使用拖放的順序排序照片。

在頁面加載時，系統會提示用戶上傳張貼到下一頁的照片。當他們到達下一頁時，我的php腳本爲其上傳的每個文件創建一個包含<li>的<ul id="sortable">。對於他們上傳到網站的每張圖片，都會創建一個新的<li>。 <li>的內部是<img>，它爲<li>設置了他們上傳的圖片的圖片。

我的目標是能夠在拖放界面中排列圖片後「保存」圖片的順序。例如，一旦他們按照他們想要的順序完成整理和排序，我希望能夠向他們發送另一個創建xml文件的頁面（我不需要XML幫助，只保存訂單），並使用它們以正確順序創建的列表。

經過幾個小時對PHP的修補之後，我意識到由於PHP是一種服務器端語言，它無法看到什麼是排序的post render。所以我的問題是，有沒有辦法讓JavaScript或Ajax讀取列表的當前順序，並將其發佈到下一頁？如果你知道怎麼做，你能否提供一個來自一個頁面的POST的例子和另一個接收的帖子的例子？我對Ajax不是很熟悉。

非常感謝您提供的任何幫助。

示例代碼

$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(); 
     }); 
    } 
} 

Answer 2

如果您使用的是<form>你可以做這樣的事情（對於上載的每個文件創建一個LI foreach語句的內容） （假設正在使用jQuery）：

$('#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)); 
}); 

實質上，你在做什麼是l通過<ul>進行訪問，獲取每個<img>並將ID（按照外觀順序）添加到數組中。數組使用JavaScript和JSON保存排序，因此可以使用JSON.stringify函數將其轉換爲JSON字符串，並將其設置爲<input type="hidden">字段的值，然後提交表單。

如果你想使用AJAX，功能非常相似。但是，您可以使用$.post而不是使用onsubmit（或onclick）。

讓我們去<form>選項，因爲它更簡單。總之你有類似上述JS一些與HTML這樣一起：

<form id="my_form" method="post" action="./update_data.php"> 
    <!-- other fields --> 
    <input type="hidden" name="ordered_list_data" id="ordered_list_data"></input> 
    <input type="submit" value="Submit"></input> 
</form> 

然後，在update_data.php（或任何腳本名爲）：

<?php 
    // process other fields as normal 
    if(isset($_POST['ordered_list_data'])) { 
     $img_ordering = json_decode($_POST['ordered_list_data']); 
    } else { 
     // handle case where there is no data 
    } 
    // do things with the data 
?>