如何用PHP+Ajax实现jQuery UI Sortable多Div间列表项拖拽排序

架构老林

2026-5-6

嘿，我来帮你搞定这个跨列表拖拽排序的问题！首先得先纠正你HTML里的几个关键问题——同一个页面里ID必须是唯一的，你之前三个ul都用了id="sortable1"，这会让jQuery找不到正确的元素，而且你的HTML嵌套也有点乱，先把结构理清楚。

下面我会从结构修复、前端拖拽配置、后端数据保存三个核心部分给你拆解方案：

第一步：修复HTML结构

先给每个ul分配唯一的ID（比如sortable1/sortable2/sortable3），同时给每个列表项加上唯一的data-id属性（对应数据库里的条目ID，方便后端识别更新），并用flex布局让三个容器并排：

<div style="display: flex; gap: 20px; padding: 20px;">
  <!-- 第一个排序容器 -->
  <div class="sortable-box">
    <ul id="sortable1" class="sortable-list">
      <li data-id="1">list item 1</li>
      <li data-id="2">list item 2</li>
      <li data-id="3">list item 3</li>
      <li data-id="4">list item 4</li>
    </ul>
  </div>
  <!-- 第二个排序容器 -->
  <div class="sortable-box">
    <ul id="sortable2" class="sortable-list">
      <li data-id="11">list item 11</li>
      <li data-id="12">list item 12</li>
      <li data-id="13">list item 13</li>
      <li data-id="14">list item 14</li>
    </ul>
  </div>
  <!-- 第三个排序容器 -->
  <div class="sortable-box">
    <ul id="sortable3" class="sortable-list">
      <li data-id="21">list item 21</li>
      <li data-id="22">list item 22</li>
      <li data-id="23">list item 23</li>
      <li data-id="24">list item 24</li>
    </ul>
  </div>
</div>

第二步：配置jQuery UI Sortable实现跨列表拖拽

核心是用connectWith属性把所有可排序列表连接起来，这样就能实现跨容器拖拽。同时在拖拽结束的update事件里，收集所有列表的位置数据，用Ajax发送给后端保存：

$(function() {
  // 初始化所有带sortable-list类的列表
  $(".sortable-list").sortable({
    connectWith: ".sortable-list", // 关键：允许跨同class的列表拖拽
    placeholder: "ui-state-highlight", // 拖拽时的占位样式（可选）
    cursor: "move", // 拖拽时的鼠标样式
    update: function(event, ui) {
      // 收集所有列表的排序数据
      let sortData = [];
      $(".sortable-list").each(function() {
        const listId = $(this).attr("id"); // 当前列表的ID（比如sortable1）
        $(this).find("li").each(function(index) {
          sortData.push({
            item_id: $(this).data("id"), // 列表项的唯一ID
            list_id: listId, // 所属列表的ID
            position: index + 1 // 位置从1开始，方便数据库存储
          });
        });
      });

      // 发送数据到后端
      $.ajax({
        url: "save-sort-position.php", // 后端处理文件路径
        type: "POST",
        data: { sort_data: JSON.stringify(sortData) },
        success: function(response) {
          console.log("排序位置保存成功：", response);
          // 这里可以加前端提示，比如Toast通知
        },
        error: function(xhr, status, error) {
          console.error("保存失败：", error);
        }
      });
    }
  }).disableSelection(); // 禁止选中文本，提升拖拽体验
});

第三步：后端PHP处理排序数据保存

首先假设你的数据库表结构（可以根据自己需求调整）：

CREATE TABLE `sortable_items` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `item_id` int(11) NOT NULL UNIQUE, -- 列表项的唯一ID
  `list_id` varchar(50) NOT NULL, -- 所属列表的ID（比如sortable1）
  `position` int(11) NOT NULL, -- 排序位置
  `content` varchar(255) NOT NULL, -- 列表项的文本内容
  PRIMARY KEY (`id`)
);

然后写save-sort-position.php的处理逻辑，用事务保证数据一致性：

<?php
// 数据库连接信息，替换成你自己的
$servername = "localhost";
$username = "your_db_user";
$password = "your_db_pwd";
$dbname = "your_db_name";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
  die("数据库连接失败: " . $conn->connect_error);
}

// 接收前端发送的排序数据
if (isset($_POST['sort_data'])) {
  $sortData = json_decode($_POST['sort_data'], true);
  
  // 开启事务，确保所有更新要么全成功，要么全回滚
  $conn->begin_transaction();
  
  try {
    foreach ($sortData as $item) {
      // 转义数据，防止SQL注入
      $itemId = $conn->real_escape_string($item['item_id']);
      $listId = $conn->real_escape_string($item['list_id']);
      $position = $conn->real_escape_string($item['position']);
      
      // 用REPLACE INTO：存在则更新，不存在则插入
      $sql = "REPLACE INTO sortable_items (item_id, list_id, position) VALUES ('$itemId', '$listId', '$position')";
      $conn->query($sql);
    }
    
    $conn->commit();
    echo "排序位置已成功保存";
  } catch (Exception $e) {
    $conn->rollback();
    echo "保存失败: " . $e->getMessage();
  }
}

$conn->close();
?>

第四步：页面加载时从数据库恢复排序

如果需要页面打开就显示正确的排序状态，可以在PHP里查询数据库，按列表和位置排序后输出HTML：

<?php
// 数据库连接（同上）
$sql = "SELECT item_id, list_id, position, content FROM sortable_items ORDER BY list_id, position";
$result = $conn->query($sql);

// 按列表分组存储数据
$itemsByList = [];
while ($row = $result->fetch_assoc()) {
  $itemsByList[$row['list_id']][] = $row;
}
?>

<!-- 输出排序后的列表 -->
<div style="display: flex; gap: 20px; padding: 20px;">
  <div class="sortable-box">
    <ul id="sortable1" class="sortable-list">
      <?php foreach ($itemsByList['sortable1'] ?? [] as $item): ?>
        <li data-id="<?php echo $item['item_id']; ?>"><?php echo htmlspecialchars($item['content']); ?></li>
      <?php endforeach; ?>
    </ul>
  </div>
  <div class="sortable-box">
    <ul id="sortable2" class="sortable-list">
      <?php foreach ($itemsByList['sortable2'] ?? [] as $item): ?>
        <li data-id="<?php echo $item['item_id']; ?>"><?php echo htmlspecialchars($item['content']); ?></li>
      <?php endforeach; ?>
    </ul>
  </div>
  <div class="sortable-box">
    <ul id="sortable3" class="sortable-list">
      <?php foreach ($itemsByList['sortable3'] ?? [] as $item): ?>
        <li data-id="<?php echo $item['item_id']; ?>"><?php echo htmlspecialchars($item['content']); ?></li>
      <?php endforeach; ?>
    </ul>
  </div>
</div>

额外优化：拖拽体验CSS

可以加一些样式提升拖拽体验：

.sortable-list {
  list-style-type: none;
  margin: 0;
  padding: 10px;
  width: 220px;
  background: #f8f9fa;
  border-radius: 8px;
}
.sortable-list li {
  margin: 6px 0;
  padding: 12px;
  background: white;
  border-radius: 4px;
  cursor: move;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s;
}
.sortable-list li:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.ui-state-highlight {
  height: 44px;
  background: #e9ecef;
  border-radius: 4px;
  margin: 6px 0;
}

内容的提问来源于stack exchange，提问作者msp