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

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

组件

我用 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框架

我来解答赞 3 收藏

反馈

1 条解答

芳芳 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