Sortable toArray()偶现末尾重复元素问题排查与疑问

问题背景 #

我通过表单让用户对一组项目进行排序，使用Sortable及toArray()方法将排序结果存储在名为ranking的隐藏表单字段中，实现代码如下：

<ul id="items" class="list-group list-group-numbered" style="cursor: move">
  <li data-id="1" class="list-group-item list-group-item-action">Option 1</li>
  <li data-id="2" class="list-group-item list-group-item-action">Option 2</li>
  <li data-id="3" class="list-group-item list-group-item-action">Option 3</li>
  <li data-id="4" class="list-group-item list-group-item-action">Option 4</li>
  <li data-id="5" class="list-group-item list-group-item-action">Option 5</li>
</ul>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
  let el = document.getElementById('items');
  let sortable = Sortable.create(el, {
    animation: 150,
    onChange: function (evt) {
      forminputs.ranking.value = sortable.toArray().join(',');
      }
  });
</script>

<input type="hidden" name="ranking" id="ranking">

多数情况下ranking变量存储的是项目ID组成的正常字符串，但偶尔（约10%的数据）会出现某一ID重复的情况：数组长度比预期多1，重复ID始终位于数组末尾，前n个元素保持唯一，第n+1个元素为之前某元素的重复。我无法稳定复现该问题，想咨询两个问题：

• 这是否与特定浏览器有关？
• 能否认为前n个元素是用户提交的真实排序结果？

分析与解答 #

是否与特定浏览器有关？ #

Sortable.js的核心逻辑在主流浏览器（Chrome、Firefox、Safari、Edge）中是一致的，但不同浏览器的DOM事件触发时机、拖拽行为细节存在细微差异，极端场景下（比如快速连续拖拽、拖拽未完全结束时）可能导致onChange事件被重复触发，或者toArray()在DOM状态未完全同步时读取到临时的重复节点状态。不过目前没有明确的浏览器专属bug记录直接指向这个重复ID问题，更可能是代码的事件触发时机不合理导致的。

你的代码在onChange事件中直接调用toArray()赋值，但onChange会在拖拽过程中多次触发（比如拖拽时每移动一个位置就触发一次），而非仅在拖拽结束时触发。如果拖拽过程中DOM节点的状态还没完全更新完成，toArray()就可能读取到临时的重复节点，从而导致数组出现重复ID并多出一个元素。

能否信任前n个元素为真实排序结果？ #

可以认为前n个唯一元素是用户的真实排序结果。因为重复ID始终出现在数组末尾，说明这是toArray()读取到了DOM更新过程中的临时状态——实际页面上的<li>元素数量始终是固定的5个，不会真的多出一个重复节点，只是在事件触发的瞬间，Sortable内部的DOM操作还未完成，导致toArray()返回了包含临时重复项的数组。

修复建议 #

1. 改用onEnd事件替代onChange：onEnd仅在拖拽完全结束后触发一次，此时DOM状态已经稳定，toArray()能准确读取到最终排序结果，避免过程中的临时状态干扰。修改后的代码如下：

let el = document.getElementById('items');
let sortable = Sortable.create(el, {
  animation: 150,
  onEnd: function (evt) {
    document.getElementById('ranking').value = sortable.toArray().join(',');
  }
});

2. 添加结果校验逻辑：在赋值前对toArray()返回的数组做去重并截取前n个元素（n为初始项目数量），确保结果长度固定：

onEnd: function (evt) {
  const ids = sortable.toArray();
  const uniqueIds = [...new Set(ids)].slice(0, 5); // 5为初始项目总数
  document.getElementById('ranking').value = uniqueIds.join(',');
}

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