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

Question

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

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

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

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

我想避免刷新和重新提取数据从DB。所以我想同步元素在两个列表中的位置。因此，每当用户拖动列表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

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

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

请注意，在我的示例中，我通过不包括克隆属性简化了list 2的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();

当您移动列表项时，您将能够看到列表自动更新；这使得确认重新订购例程按预期工作变得更容易。

Answer 2

也许这能帮上忙：

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

http://jsfiddle.net/penjepitkertasku/6bk7B/1/

$(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"
    });
});