将不同列表中的两个可排序对象按其类移动到相同位置

Question

我有两个可排序对象列表

1         1 (1A 1B)
2 (2A 2B) 2 
3         3 (3A 3B)
4 (4A 4B) 4
5         5 (5A 5B)

列表的代码如下所示：

1         1 (1A 1B)
2 (2A 2B) 2 
3         3 (3A 3B)
4 (4A 4B) 4
5         5 (5A 5B)

$( function() {
    $( ".contain" ).sortable();
 });

.contain{
   list-style: none;
}

#right{
   float: left;
}

#left{
   float: left;
}

我想将相同的数字排序在一起。例如，如果我将列表5中​​的“左”移到顶部，那么列表5中的“右”也应移到顶部，反之亦然。从列表“ right”中的3移到顶部，然后列表“ left”中的3将执行相同的操作。

Answer 1

在你的代码中使用这个js并尝试这个答案

$(".contain").sortable({
    start:function(event, ui){
        pre = ui.item.index();
    },
    stop: function(event, ui) {
        lst = $(this).attr('id');
        post = ui.item.index();
        other = (lst == 'left') ? 'right' : 'left';
        if (post > pre) {
            $('#'+other+ ' li.li_parent:eq(' +pre+ ')').insertAfter('#'+other+ ' li.li_parent:eq(' +post+ ')');
        }else{
            $('#'+other+ ' li.li_parent:eq(' +pre+ ')').insertBefore('#'+other+ ' li.li_parent:eq(' +post+ ')');
        }
    }
});

您的 ul 应该与 li 一起使用，例如：-并为 moving<li>1<ul><li>a</li></ul></li>指定类名。li_parentli

$(".contain").sortable({
    start:function(event, ui){
        pre = ui.item.index();
    },
    stop: function(event, ui) {
        lst = $(this).attr('id');
        post = ui.item.index();
        other = (lst == 'left') ? 'right' : 'left';
        if (post > pre) {
            $('#'+other+ ' li.li_parent:eq(' +pre+ ')').insertAfter('#'+other+ ' li.li_parent:eq(' +post+ ')');
        }else{
            $('#'+other+ ' li.li_parent:eq(' +pre+ ')').insertBefore('#'+other+ ' li.li_parent:eq(' +post+ ')');
        }
    }
});

$(function() {
    var lst, pre;

    $(".contain").sortable({
        start: function(event, ui) {
            pre = ui.item.index();
        },
        stop: function(event, ui) {
            lst = $(this).attr('id');
            post = ui.item.index();
            other = (lst == 'left') ? 'right' : 'left';
            if (post > pre) {
                $('#' + other + ' li.li_parent:eq(' + pre + ')').insertAfter('#' + other + ' li.li_parent:eq(' + post + ')');
            } else {
                $('#' + other + ' li.li_parent:eq(' + pre + ')').insertBefore('#' + other + ' li.li_parent:eq(' + post + ')');
            }
        }
    });

});

.contain{
   list-style: none;
}

#right{
   float: left;
}

#left{
   float: left;
}