JS怎么嵌入PHP实现拖拽排序-php教程-PHP中文网

js不能嵌入php执行拖拽排序，但可通过sortable.js实现前端拖拽，再用ajax将新顺序发送至php接口，由php更新数据库排序字段，并支持事务处理与返回最新数据。

js怎么嵌入php实现拖拽排序

JS 本身不能“嵌入”PHP 执行拖拽排序，因为 PHP 是服务端语言，JS 是客户端语言，二者运行环境不同。但可以配合实现：用 JS（如 Sortable.js）完成前端拖拽交互，再通过 AJAX 把新顺序发给 PHP 接口，由 PHP 更新数据库或文件中的排序字段。

1. 前端用 Sortable.js 实现拖拽

引入 Sortable.js（CDN 或本地），绑定列表容器，监听排序结束事件：

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

标题一
标题三
标题二

2. PHP 接收并保存排序数据

在 save_order.php 中解析 JSON，校验数据，更新数据库（以 MySQL 为例）：

<?php header('Content-Type: application/json; charset=utf-8');
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
  http_response_code(405);
  echo json_encode(['error' => 'Method not allowed']);
  exit;
}

$input = file_get_contents('php://input');
$data = json_decode($input, true);

if (!isset($data['order']) || !is_array($data['order'])) {
  http_response_code(400);
  echo json_encode(['error' => 'Invalid order data']);
  exit;
}

$order = array_map('intval', $data['order']); // 转为整数，防注入

// 假设表名为 `items`，含 `id` 和 `sort_order` 字段
$pdo = new PDO('mysql:host=localhost;dbname=test', 'user', 'pass');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

try {
  $pdo->beginTransaction();
  foreach ($order as $index => $id) {
    $stmt = $pdo->prepare("UPDATE items SET sort_order = ? WHERE id = ?");
    $stmt->execute([$index + 1, $id]);
  }
  $pdo->commit();
  echo json_encode(['success' => true]);
} catch (Exception $e) {
  $pdo->rollback();
  http_response_code(500);
  echo json_encode(['error' => 'Save failed']);
}>