javascript - 如何同步包含克隆元素的 jquery 可排序列表？

Question

我有一个特殊的情况。我有两个列表。 1 个列表包含所有项目，2 个包含顶部列表。显然项目重叠，第二个列表中的项目被标记为类 clone-23 clone-25，根据它们是从列表 1 中克隆的哪个元素。

Example:
List 1
1 run
2 eat
3 drink
4 play

List 2 (TOP)
1 run (class clone)
2 eat (class clone)

当重新排列的数据保存到数据库时。

我想避免刷新和重新从数据库中提取数据。所以我想同步两个列表中元素的位置。因此，每当用户在列表 1 中拖动项目时，列表 2 会自动显示更改的位置，反之亦然。

我开始我的排序:

// Initiate jquery ui sortable
    $(".word-list").sortable({
        tolerance: 'pointer',
        cursor: 'move',
        forcePlaceholderSize: true,
        dropOnEmpty: true,
        connectWith: 'ol.word-list',
        //containment: "body",
        // 
        start: function(event, ui) {
            // Starting position of the word element
            //ui.item.startPos = ui.item.index();
            //console.dir(ui.item.startPos);
        },
        //
        stop: function(event, ui) {
            //
        },
        update: function(event, ui) {
            //
            save_word_order(this);
            //
        },
        out: function(event, ui) {
            //
        },
        over: function(event, ui) {
            //
        },
        placeholder: "ui-state-highlight"
    });

克隆元素 html:

<li data-con-id="94" data-order-id="1" data-note="" class="ui-state-default clone-94"</li>

列表很简单:

<ol id="tabs-1" class="word-list"></ol>
<ol id="tabs-2" class="word-list"></ol>

有什么想法吗？

Answer 1

请参阅此 fiddle 以获取同步两个列表共有的项目顺序的代码:

http://jsfiddle.net/Fresh/22jc2/

请注意，在我的示例中，我通过不包括克隆属性简化了列表二的 li 元素；相反，我通过列表项的 innerText 值比较两个列表中的项目。如果您确实需要使用克隆项目属性，那么重构我的解决方案以使用它们应该相当容易。

我用来实现普通列表项顺序同步的脚本是:

var reorderLists = function (list1, list2) {
    $('#' + list1 + ' li').each(function (index) {
        var sortableItemWithText = $('#' + list2 + ' li:contains(' + this.textContent + ')');
        if (sortableItemWithText.length === 1) {
            sortableItemWithText.appendTo('#' + list2);
            return;
        }
    });
};

$("#sortable1, #sortable2").sortable({
    update: function (event, ui) {
        var parentNodeId = ui.item[0].parentNode.id;
        if (parentNodeId == "sortable1") {
            reorderLists("sortable1", "sortable2");
        }

        if (parentNodeId == "sortable2") {
            reorderLists("sortable2", "sortable1");
        }
    }
});

$("#tabs").tabs();

请注意，如果您更改列表 1 或列表 2 中项目的位置，则常见列表项目的顺序同步会起作用。

另请注意，通过注释掉:

$("#tabs").tabs();

当您移动列表项时，您将能够看到列表自动更新；这样可以更轻松地确认重新订购例程是否按预期工作。