php中实现拖拽排序功能_php接收排序数据并更新数据库顺序字段

<ul id="sort-list">
  <li data-id="1">项目 1</li>
  <li data-id="2">项目 2</li>
  <li data-id="3">项目 3</li>
</ul>
<button id="save-sort">保存排序</button>

$(function() {
  $("#sort-list").sortable(); // 启用拖拽排序
<p>$("#save-sort").click(function() {
// 获取排序后的 ID 顺序
var order = [];
$("#sort-list li").each(function() {
order.push($(this).data('id'));
});</p><pre class='brush:php;toolbar:false;'>// 发送到 PHP 处理
$.post('update_order.php', { order: order }, function(response) {
  if (response.success) {
    alert('排序保存成功！');
  } else {
    alert('保存失败：' + response.message);
  }
}, 'json');

<?php
header('Content-Type: application/json');
<p>// 连接数据库（根据你的配置修改）
$pdo = new PDO("mysql:host=localhost;dbname=test", "username", "password");
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);</p><p>// 接收 POST 数据
$order = $_POST['order'] ?? [];</p><p>if (!is_array($order) || empty($order)) {
echo json_encode(['success' => false, 'message' => '无效的排序数据']);
exit;
}</p><p>try {
// 开启事务
$pdo->beginTransaction();</p><pre class='brush:php;toolbar:false;'>$index = 1;
foreach ($order as $id) {
    $stmt = $pdo->prepare("UPDATE items SET sort_order = ? WHERE id = ?");
    $stmt->execute([$index, $id]);
    $index++;
}

$pdo->commit();
echo json_encode(['success' => true, 'message' => '排序更新成功']);

SELECT * FROM items ORDER BY sort_order ASC