如何同步包含克隆元素的jQuery可排序列表? [英] How to sync jquery sortable lists that contain cloned elements?

问题描述

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

I've a peculiar situation. I have two lists. 1 list contains all items, and 2 contains top list. Obviously items overlap, and items in the second list are marked with class clone-23 clone-25 according to which element from list 1 are they cloned from.

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

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

将重新排列的数据保存到数据库时.

When re-arranged data is saved to DB.

我想避免刷新和重新拖动数据库中的数据.因此，我想同步两个列表中元素的位置. 因此，只要用户在列表1中拖动项目，列表2就会自动显示更改的位置，反之亦然.

I would like to avoid refresh and re-pulling of data from DB. So I would like to sync position of elements in two lists. So whenever user drags around item in list 1, list 2 automatically shows changed positions and vice versa.

我启动我的排序:

// 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>

有什么想法吗?

推荐答案

请参见此小提琴，以获取用于同步两个列表共有的项目顺序的代码:

See this fiddle for code which syncs the order of items common to both lists:

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

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

Note that in my example I have simplified list two's li elements by not including the clone attributes; instead I am comparing items in both list by the list item's innerText value. It should be fairly easy for you to refactor my solution to use the clone item attributes if you really need to use them.

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

The script which I've used to achieve the synchronisation of the order of the common list items is:

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中项目的位置，则可以同步公用列表项目的顺序.

Note that the syncing of the order of common list items works if you change the position of items in either list 1 or list 2.

还请注意，将其注释掉:

Also note that by commenting out:

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

移动列表项时，您将看到列表自动更新；这样可以更轻松地确认重新排序例程是否按预期工作.

You'll be able to see the lists updating automatically when you move the list items; this makes it easier to confirm that the re-order routine is work as expected.

这篇关于如何同步包含克隆元素的jQuery可排序列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！