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

How to sync jquery sortable lists that contain cloned elements?

本文关键字：元素 jquery 列表 排序 包含克 何同步 同步      更新时间：2023-12-20

我遇到了一个特殊的情况。我有两份清单。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>

有什么想法吗？

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

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

注意，在我的示例中，我简化了list two的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();

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

也许这会有所帮助：

请参阅此fiddle以获取同步两者公用项目顺序的代码列表：

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"
    });
});
相关文章：