交换数据属性排序 jQuery UI Sortable

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 可排序...

但是，当用户确实更改顺序时，我希望交换数据排序属性，以便它们保持一致的排序顺序——同时仍保持其原始数据 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

Swap data attributes sorting with jQuery UI Sortable

javascript

jquery

jquery-ui

jquery-ui-sortable