jQuery UI Sortable位置保存异常：拖拽元素后无法存储li位置

看起来你是在用jQuery UI的拖拽（Draggable）和排序（Sortable）组件，但遇到了把拖拽元素放到ul#sortable的对应位置后，没法持久化保存这个排序结果的问题——我之前也碰到过类似的场景，给你一套完整的解决方案：

首先先补全你提供的HTML结构（方便后续测试）：

<div class="col-md-12" id="formdrag">
  <ul>
    <li id="draggable" class="ui-state-highlight">Drag me down</li>
  </ul>
  <ul id="sortable">
    <li id="item-1" class="ui-state-default">Item 1</li>
    <li id="item-2" class="ui-state-default">Item 2</li>
    <li id="item-3" class="ui-state-default">Item 3</li>
    <li id="item-4" class="ui-state-default">Item 4</li>
  </ul>
</div>

注意：我给每个排序列表的li加上了唯一id，这是后续准确保存和恢复排序的关键，避免文本重复导致的匹配错误。

第一步：确保拖拽与排序的交互正常 #

首先要让拖拽元素能正确加入排序列表，并用update事件监听排序变化——这个事件会在排序完成（包括拖拽元素加入后）触发，正好是我们保存位置的时机：

$(function() {
  // 初始化拖拽元素
  $("#draggable").draggable({
    connectToSortable: "#sortable", // 指定可连接到的排序列表
    helper: "clone", // 如果想保留原拖拽元素，用clone；如果要直接移动元素，去掉这个配置
    revert: "invalid" // 拖到非目标区域时自动返回原位置
  });

  // 初始化排序列表
  $("#sortable").sortable({
    accept: "#draggable", // 指定接受的拖拽元素
    update: function(event, ui) {
      // 排序发生变化时触发，在这里调用保存函数
      saveSortOrder();
    }
  });

  // 页面加载时自动恢复之前保存的排序
  loadSortOrder();
});

第二步：实现排序位置的保存与恢复 #

这里分两种常见场景：本地存储（适合不需要后端的单页场景） 和 后端存储（适合多用户或需要持久化到服务器的场景）

场景1：本地存储（localStorage）

// 保存排序到本地存储
function saveSortOrder() {
  // 获取排序后每个li的id数组
  var sortOrder = $("#sortable").sortable("toArray", { attribute: "id" });
  // 转成JSON字符串保存到localStorage
  localStorage.setItem("sortableListOrder", JSON.stringify(sortOrder));
}

// 从本地存储恢复排序
function loadSortOrder() {
  var savedOrder = localStorage.getItem("sortableListOrder");
  if (savedOrder) {
    var orderArray = JSON.parse(savedOrder);
    var $sortableList = $("#sortable");
    
    // 按照保存的id顺序重新排列li
    $.each(orderArray, function(index, itemId) {
      $sortableList.append($("#" + itemId));
    });
  }
}

场景2：后端存储（AJAX请求）

如果需要把排序结果保存到服务器，只需要修改saveSortOrder函数，把数据通过AJAX发送到后端接口：

// 保存排序到后端服务器
function saveSortOrder() {
  var sortOrder = $("#sortable").sortable("toArray", { attribute: "id" });
  
  $.ajax({
    url: "/api/save-sort-order", // 替换成你的后端接口地址
    method: "POST",
    data: { order: JSON.stringify(sortOrder) },
    success: function(response) {
      console.log("排序已成功保存到服务器");
    },
    error: function(xhr) {
      console.error("保存排序失败：", xhr.responseText);
    }
  });
}

// 从后端加载排序（示例）
function loadSortOrder() {
  $.ajax({
    url: "/api/get-sort-order", // 替换成你的后端获取排序的接口
    method: "GET",
    success: function(response) {
      var orderArray = JSON.parse(response.order);
      var $sortableList = $("#sortable");
      
      $.each(orderArray, function(index, itemId) {
        $sortableList.append($("#" + itemId));
      });
    }
  });
}

关键注意事项 #

• 一定要给每个li设置唯一的id，这是准确保存和恢复排序的核心，避免因文本重复导致的匹配错误
• 如果是直接移动拖拽元素（不是克隆），记得在拖拽完成后给新加入排序列表的元素设置唯一id（比如可以给原拖拽元素的id加上后缀，避免重复）
• 测试时可以打开浏览器的开发者工具（Application -> Local Storage）查看本地存储的排序数据，确认保存是否正常

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