Php jquery可拖动列表位置保存到数据库

我有以下代码，用于使用jQueryUI元素从数据库获取数据并对可拖动列表进行排序

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

示例结果

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

number保存到数据库中呢？

jquery UI sortable有一个停止回调，当您停止移动排序表时会调用它。它还有一个序列化函数，您可以结合使用该函数将排序表的顺序发送到更新数据库的进程。您可以这样使用它：

要使用

序列化

，需要修改DOM中的可排序元素，使其包含对

用户id的引用。例如

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

然后需要一个进程来接收这些数据并更新数据库。我会把大部分的事情留给你，但这里有一个最小的例子

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

使用此事件处理程序DB密码通过ajax发送数据
q8scool\u考试
这是一个家庭作业问题吗？我知道这个答案有点旧，但对任何新出现的人来说都是一个提示。不要使用
mysqli\u connect
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);
    }
});

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