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