UIkit Sortable 排序后怎么获取新的顺序？

爱学习的姿言提问于 2026-03-12 12:17:21 阅读 31

组件

我用 UIkit 的 sortable 组件做了一个拖拽排序列表，但拖完之后不知道怎么拿到最新的元素顺序。文档里没太看明白，试了 change 事件但好像没触发？

我的 HTML 结构大概是这样：

<ul uk-sortable="handle: .drag-handle">
  <li data-id="1"><span class="drag-handle">::</span> Item 1</li>
  <li data-id="2"><span class="drag-handle">::</span> Item 2</li>
  <li data-id="3"><span class="drag-handle">::</span> Item 3</li>
</ul>

想在排序完成后打印出所有 data-id 的新顺序，有啥办法吗？

UIkit UI框架

我来解答赞 8 收藏

反馈

2 条解答

技术怡玥 Lv1

官方文档里说 UIkit 的 sortable 组件在完成排序后会触发 update 事件，而不是 change 事件。你可以在这个事件里获取到新的顺序。

这里有个简单的实现方法，直接绑定 update 事件然后遍历列表项来获取 data-id：



UIkit.util.on('ul', 'update', function () {

  let newOrder = [];

  document.querySelectorAll('ul > li').forEach(item => {

    newOrder.push(item.getAttribute('data-id'));

  });

  console.log(newOrder);

});

这个代码会在每次排序完成后运行，把所有的 data-id 按新顺序放进数组并打印出来。记得要把你的 ul 元素加个 id 或者用其他选择器准确找到它，不然可能会绑到多个元素上。

唉，有时候文档里的小细节确实容易被忽略，我也是调试了好几次才搞清楚这事儿。希望能帮到你。

2026-03-26 22:28

芳芳 Lv1

UIkit sortable 的 change 事件确实能触发，但你得用对方式。

最直接的办法：排序完成后直接去读 DOM 里现在的顺序就行，不需要依赖什么特定事件回调。

// 监听 moved 事件，拖拽完成后触发

UIkit.util.on('ul[uk-sortable]', 'moved', function(e) {

    var order = [];

    this.querySelectorAll('li').forEach(function(li) {

        order.push(li.getAttribute('data-id'));

    });

    console.log(order);

});

或者你不想用事件，直接在需要的时候调用：

function getSortOrder() {

    var order = [];

    document.querySelector('ul[uk-sortable]').querySelectorAll('li').forEach(function(li) {

        order.push(li.getAttribute('data-id'));

    });

    console.log(order);

    return order;

}

还有个小问题：你用的 handle: .drag-handle 是指只能用那个把手拖拽，但事件绑定要绑在 ul 上，不是 li 上。用 UIkit.util.on 或者直接 UIkit.on('moved', ...) 都行。

如果你是用 jQuery 的方式初始化，也可以直接：

UIkit.sortable('ul[uk-sortable]').element.addEventListener('moved', function() {

    var order = [];

    this.querySelectorAll('li').forEach(function(li) {

        order.push(li.dataset.id);

    });

    console.log(order);

});

核心就是：UIkit 只负责帮你拖拽，拖完之后的顺序就在 DOM 里明摆着，直接遍历 li 取 data-id 完事，比啥都靠谱。

2026-03-12 13:02