javascript - 将 sortable.js 与 HTML 自定义数据属性结合使用

Question

如何使用 HTML 的自定义数据属性通过 sortable.js 对项目进行排序？

或者如何使用 sortable.js 定义自定义排序参数？

例如在下面的代码中，我想使用数据时间戳进行排序

<ul id="items">
    <li data-timestamp='1'>item Y</li>
    <li data-timestamp='2'>item B</li>
    <li data-timestamp='3'>item Z</li>
</ul>

Answer 1

使用此处记录的store功能:https://github.com/SortableJS/Sortable#store

您可以向 Sortable 传递属性的排序数组，并将 dataIdAttr 设置为 'data-timestamp'

Sortable.create(el, {
    dataIdAttr: 'data-timestamp',
    store: {
        get: function () {
            return ['1', '2', '3'];
        }
    }
})