Question

我有一个列表，该列表在与排序顺序相关的每个列表项上设置了数据属性

<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 Sortable重新排序...

但是，当用户更改订单时，我希望将数据排序属性换出，以便它们保持一致的排序顺序 - 同时仍保持其原始数据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();

任何输入都将不胜感激。我甚至可能没有正确的想法...

Answer 1

不是使用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/

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

1 个答案: