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

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

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>

---

有关同步两个列表共有的项目顺序的代码，请参见此小提琴：


注意，在我的示例中，我简化了列表2的li元素，不包括clone属性；而是通过列表项的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();

移动列表项时，您将能够看到列表自动更新；这样可以更容易地确认重新订购例行程序是否按预期工作。
这可能有助于：

请参阅此提琴，了解同步这两个项目共有的顺序的代码
清单：


你能进一步澄清你的问题吗？我可以帮你then@Shaheer我试过。。。还不清楚吗？你能提供清单2中的“类克隆”与清单1中的项目之间的关系吗？我可以看到两个列表中都有“1次运行”，但您对“类克隆”的使用需要澄清。列表二是否总是显示列表一中的前两项？
$("#tabs").tabs();

$(function() {
var dragElementID = "";
var dropElementID = "";
var dragElementItemName = "";
var allElementItemName = "";

    $(".word-list").sortable({
        tolerance: 'pointer',
        cursor: 'move',
        helper: 'clone',
        //revert: 'invalid',
        forcePlaceholderSize: true,
        dropOnEmpty: true,
        connectWith: 'ol.word-list',
        start: function(e, ui){
            var id = $('ol.word-list').children().index($(ui.item[0]));
            var name = $('ol.word-list').children(':eq(' + id + ')').text();

            dragElementItemName = name;
            dragElementID = this.id;
        },
        stop: function(event, ui) {
            var id = $('ol.word-list').children().index($(ui.item[0]));

            //validate
            if(dragElementID == dropElementID) { return; }
            if(id == -1)return;
            if(dragElementID == "tabs-1")
            {
                if(allElementItemName.indexOf(dragElementItemName,1) > 0) { $(this).sortable('cancel'); return; }
                var elm = $(ui.item[0]).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone');
                $('ol.word-list').children(':eq(' + id + ')').after(elm);
                $(this).sortable('cancel');

            }else{
                ui.item.remove(); 
            }
        },
        update: function(event, ui) {
            //
            //save_word_order(this);
            //
        },
        out: function(event, ui) {
            //
        },
        over: function(event, ui) {
            //
            dropElementID = this.id;
            allElementItemName = '|' + $('#' + dropElementID + ' li').text() + '|';
        },
    placeholder: "ui-state-highlight"
    });
});