jquery可拖動列表位置保存到數據庫

Question

我有以下代碼從數據庫中獲取數據和使用jQuery UI元素對可拖動列表進行排序。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<style> 
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; background-color:#CCC;} 
#sortable li span { position: absolute; margin-left: -1.3em; } 
</style> 
<script> 
$(function() { 
$("#sortable").sortable(); 
$("#sortable").disableSelection(); 
}); 
</script> 

<?php 
$con=mysqli_connect("localhost","root","","db_name"); 

if (mysqli_connect_errno()) { 
    echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
} 
$user_id = $_SESSION['user_id']; 

$result = mysqli_query($con,"SELECT * FROM users WHERE user_id = '$user_id'"); 

echo "<ul id='sortable'>"; 

while($row = mysqli_fetch_array($result)) 
    { 
    echo "<li class='ui-state-default'>" . $row['Name'] . ' ' . $row['UserName'] . $row['sort'] ."</li>"; 
    } 

echo "</ul>"; 

mysqli_close($con); 
?> 

這是我的數據庫表結構

Table Name = users 
Columns = user_id, Name, UserName, Password, sort 

示例結果

user_id  Name UserName Password sort 
1   AAA  aa   ***  1 
2   BBB  bb   ***  2 
3   CCC  cc   ***  3 
4   DDD  dd   ***  4 

什麼，我問的是，我可以使用jquery draggable性重新排序清單項目，但如何如果重新排序列表項，我可以將sort號碼保存到數據庫嗎？

Answer 1

jQuery UI可排序有停止回調，當您停止移動可排序時會調用該回調。它還具有序列化功能，您可以組合使用它將您的可排序順序發送給更新數據庫的進程。您可以像這樣使用它：

要使用serialize，您需要修改DOM中的可排序元素，以便它包含對user_id的引用。例如。

<li class="ui-state-default" id="id_<?php echo $row['user_id'] ?>">...</li> 

然後，當您序列化可排序，它將建立一個參數列表。您不必使用id屬性來引用數據，請閱讀有關serialize method here的更多信息。但低於屬性是

var $sortable = $("#sortable"); 

$sortable.sortable({ 
    stop: function (event, ui) { 
     // parameters will be a string "id[]=1&id[]=3&id[]=10"...etc 
     var parameters = $sortable.sortable("serialize"); 

     // send new sort data to process 
     $.post("/sort/my/data.php?"+parameters); 
    } 
}); 

然後需要接收該數據並更新數據庫的過程中如何使用該ID做到這一點的例子。我將把大部分內容留給你，但這是一個最小的例子。

<?php 
// Store user IDs in array. E.g. array(0 => "1", 1 => "3", 2 => "10"....) 
$userIds = $_POST['id']; 

// Connect to your database 
$conn = mysqli_connect("localhost","root","","db_name"); 

foreach ($userIds as $key => $userId) { 
    $sequence = $key + 1; 
    $stmt = $conn->prepare("UPDATE users SET sort = $sequence WHERE user_id = ?"); 
    $stmt->bind_param("i", (int) $userId); 
    $stmt->execute(); 
} 

$stmt->close();