拖拽排序是后台管理系统里非常常见的需求，比如导航菜单调整、banner图排序、分类目录排序等。前端用Sortable.js之类的插件把拖拽动作做好之后，真正决定功能是否稳定可靠的，其实是后端php这部分：怎么接收排序数据、怎么校验、怎么高效地更新数据库里的顺序字段。这篇文章就把整套流程拆开讲清楚，并给出可以直接套用的代码。
前端拖拽与数据提交的设计
先说前端。目前最主流的方案是Sortable.js，体积小、不依赖其他库。它的核心是在拖拽结束时触发onEnd回调，我们在这个回调里把当前列表所有条目的id按新顺序收集起来，提交给后端。
提交的数据格式建议直接用一个id数组，比如ids=[5,2,8,1]，而不是提交"谁移动到了哪个位置"这种增量信息。原因是增量信息在并发场景下很难处理，而全量id顺序简单直接，后端拿到后按数组下标重新赋排序值即可，逻辑一目了然。
<ul id="sort-list">
<li data-id="5">导航菜单A</li>
<li data-id="2">导航菜单B</li>
<li data-id="8">导航菜单C</li>
</ul>
<script src="Sortable.min.js"></script>
<script>
var list = document.getElementById('sort-list');
new Sortable(list, {
animation: 150,
onEnd: function () {
var ids = [];
list.querySelectorAll('li').forEach(function (li) {
ids.push(li.getAttribute('data-id'));
});
// 提交新的id顺序给后端
fetch('/save-sort.php', {
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: 'ids=' + ids.join(',')
}).then(function (res) { return res.json(); })
.then(function (data) { alert(data.msg); });
}
});
</script>这里有个细节值得注意：提交时机最好做一下防抖。如果用户连续快速拖动多次，前端会瞬间发出多个请求，后端并发更新同一批数据容易造成顺序错乱。简单加一个300毫秒的定时器合并提交，能避免大部分问题。
php后端接收并更新排序字段
后端接收部分很简单，用$_POST['ids']拿到逗号分隔的id串，转成数组后循环更新。关键点在于两点：一是必须对id做整数校验，防止注入风险；二是更新操作要放在事务里，保证要么全部成功要么全部回滚，避免出现一半更新一半失败的脏数据。
<?php
// save-sort.php
header('Content-Type: application/json; charset=utf-8');
$pdo = new PDO('mysql:host=127.0.0.1;dbname=test;charset=utf8mb4', 'root', '123456');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// 接收并校验id列表
$ids = isset($_POST['ids']) ? explode(',', $_POST['ids']) : [];
if (empty($ids)) {
echo json_encode(['code' => 1, 'msg' => '参数错误']);
exit;
}
// 全部转为整数，过滤非法值
$ids = array_values(array_filter(array_map('intval', $ids)));
if (count(array_unique($ids)) != count($ids)) {
echo json_encode(['code' => 1, 'msg' => '存在重复id']);
exit;
}
try {
$pdo->beginTransaction();
$sql = 'UPDATE nav SET sort = ? WHERE id = ?';
$stmt = $pdo->prepare($sql);
foreach ($ids as $index => $id) {
$stmt->execute([$index + 1, $id]);
}
$pdo->commit();
echo json_encode(['code' => 0, 'msg' => '排序已保存']);
} catch (Exception $e) {
$pdo->rollBack();
echo json_encode(['code' => 1, 'msg' => '保存失败：' . $e->getMessage()]);
}上面是最基础的逐条UPDATE写法。数据量不大时（几十条以内）完全够用，但假设列表有几百条记录，几百次UPDATE往返开销就不小了。这时可以改成CASE WHEN批量更新的方式，一条SQL搞定：
<?php
// 拼接 CASE WHEN 批量更新
$cases = [];
$params = [];
foreach ($ids as $index => $id) {
$cases[] = 'WHEN ' . (int)$id . ' THEN ' . ($index + 1);
}
$in = implode(',', array_map('intval', $ids));
$sql = "UPDATE nav SET sort = CASE id " . implode(' ', $cases) . " END WHERE id IN ($in)";
$pdo->exec($sql);注意这里CASE id WHEN ... THEN ...的分支数量受MySQL的max_allowed_packet限制，正常几百条没问题。另外批量方式虽然快，但如果中间某条失败不会自动回滚其他行，所以仍然建议外面套一层事务。
分组排序与常见坑的处理
实际项目里还有一种更常见的情况：同一个表里有多个分组，比如商品分类下有多个子分类，拖拽只在同组内进行。这时后端不能只收id，还要把分组标识一并校验，否则用户篡改参数就能把A组的数据排到B组去，造成数据混乱。
处理办法有两种。一种是前端额外提交分组id，后端更新时加上WHERE group_id = ?条件；另一种更稳妥，后端根据提交的id反查它们所属的分组，确认全部属于同一组再更新。推荐后者，因为它不信任前端传来的任何分组信息，安全性更好。
<?php
// 先反查分组，确认所有id同属一组
$in = implode(',', $ids);
$rows = $pdo->query("SELECT id, group_id FROM category WHERE id IN ($in)")->fetchAll(PDO::FETCH_ASSOC);
$groupIds = array_unique(array_column($rows, 'group_id'));
if (count($groupIds) != 1) {
echo json_encode(['code' => 1, 'msg' => '数据不属于同一分组']);
exit;
}
$groupId = $groupIds[0];
// 更新时限定分组条件
$stmt = $pdo->prepare('UPDATE category SET sort = ? WHERE id = ? AND group_id = ?');
foreach ($ids as $index => $id) {
$stmt->execute([$index + 1, $id, $groupId]);
}最后总结几个容易踩的坑。第一，排序字段sort要建索引，查询时按ORDER BY sort ASC输出才有意义；第二，排序值从1开始连续分配，不要用时间戳之类的大数，否则后续插入新记录时不好处理；第三，如果系统有多个管理员同时操作，建议在更新前用SELECT ... FOR UPDATE锁住相关行，或者干脆在业务上限制同一时间只有一人能进入排序页面。把这些细节处理好，拖拽排序功能就能稳定运行了。