Sortable.js 拖拽后怎么获取新的排序顺序？

恩希 Dev 提问于 2026-03-22 12:33:18 阅读 4

交互

我用 Sortable.js 实现了一个列表的拖拽排序，但不知道拖完之后怎么拿到最新的顺序。试过在 onEnd 回调里打印 evt.newIndex，但这只能拿到单个元素的位置变化。

有没有办法直接获取整个列表重新排序后的完整顺序？比如每个 item 的 id 按新顺序排列的数组？

new Sortable(listEl, {
  onEnd: function (evt) {
    console.log('新索引:', evt.newIndex);
    // 这里怎么拿到完整的顺序？
  }
});

交互开发功能实现拖拽功能

我来解答赞 3 收藏

反馈

1 条解答

长孙美含 Lv1

通用的做法是在 onEnd 回调里通过 evt.item 获取被移动的元素，然后手动更新整个列表的顺序。你可以遍历整个列表，提取每个元素的 id 或其他唯一标识符，形成一个有序数组。下面是一个示例代码：

pre class="pure-highlightjs line-numbers">

new Sortable(listEl, {

  onEnd: function (evt) {

    // 获取被移动的元素

    const movedItem = evt.item;

    

    // 获取整个列表的所有元素

    const items = Array.from(listEl.children);

    

    // 提取每个元素的 id 或其他唯一标识符，形成有序数组

    const newOrder = items.map(item => item.id); // 假设每个 item 都有一个 id 属性

    

    console.log('新的顺序:', newOrder);

  }

});

这样，newOrder 就是你想要的、按照新顺序排列的 id 数组了。记得确保你的列表项都有唯一的标识符，比如 id，这样才能准确地反映顺序变化。

2026-03-22 13:02