使用jQuery UI Sortable交换数据属性排序

Swap data attributes sorting with jQuery UI Sortable

本文关键字：数据属性 排序 交换 Sortable jQuery UI 使用      更新时间：2023-09-26

我有一个列表，它是用与排序顺序相关的每个列表项上的数据属性设置的

<ul class="sortable">
    <li data-id="1" data-sort="1">
        Item
    </li>
    <li data-id="4" data-sort="2">
        Item
    </li>
    <li data-id="12" data-sort="3">
        Item
        <ul class="sortable">
            <li data-id="3" data-sort="4">
                Item
            </li>
            <li data-id="7" data-sort="5">
                Item
            </li>
            <li data-id="15" data-sort="6">
                Item
            </li>
            <li data-id="9" data-sort="7">
                Item
            </li>
        </ul>
    </li>
</ul>

您可以使用jQuery UI排序来重新排序。。。

但是，当用户更改顺序时，我希望数据排序属性互换，以便它们保持一致的排序顺序，同时仍然保持其原始数据id。

我试着打乱索引，但由于我在UL中有UL，所以每个列表的索引都会重置。然而，你可以在我的代码中看到，排序顺序在整个主UL中是一致的。

    $(".sortable").sortable({
        start: function (event, ui) {
            var start_sort = $(ui.item).data("sort"));
        },
        stop: function (event, ui) {
            // code ??
        },
        receive : function(event, ui) {
            // code ??
        }
    }).disableSelection();

任何意见都将不胜感激。我可能对此没有正确的想法。。。

您可以不使用index()，而只为每个循环并使用循环索引。

$(".sortable").sortable({
    update: function(e,ui) {
        $('.sortable li').each(function(index, value) {
            $(this).attr("data-sort", index+1);
        });
    },
    start: // rest of your code
}).disableSelection();

打开控制台并测试：https://jsfiddle.net/r62r0b26/

相关文章：