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

Question

我有两个可排序对象列表

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;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div>
     <div>
      <ul id="left" class="contain">
       <li class="1">1</li>
       <li class="2">2</li>
       <ul>
           <li>2A</li>
           <li>2B</li>
       </ul>
       <li class="3">3</li>
       <li class="4">4</li>
          <ul>
           <li>4A</li>
           <li>4B</li>
          </ul>
       <li class="5">5</li>
      </ul>
     </div>

     <div>
      <ul id="right" class="contain">
       <li class="1">1</li>
          <ul>
           <li>1A</li>
           <li>1B</li>
          </ul>
       <li class="2">2</li>
       <li class="3">3</li>
          <ul>
           <li>3A</li>
           <li>3B</li>
          </ul>
       <li class="4">4</li>
       <li class="5">5</li>
          <ul>
           <li>5A</li>
           <li>5B</li>
          </ul>
      </ul>
     </div>
    </div>

我想对相同的数字进行排序。例如，如果我将列表“left”中的 5 移到顶部，那么列表“right”中的 5 也应该移到顶部，反之亦然，如果我要取列表“右”中的 3 并将其移动到顶部，然后列表“左”中的 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 中，例如:- <li>1<ul><li>a</li></ul></li>并分配类(class)名称 li_parent用于移动li .

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

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div>
     <div>
      <ul id="left" class="contain">
       <li class="1 li_parent">1</li>
       <li class="2 li_parent">2
       <ul>
           <li>2A</li>
           <li>2B</li>
       </ul>
       </li>
       
       <li class="3 li_parent">3</li>
       <li class="4 li_parent">4
         <ul>
           <li>4A</li>
           <li>4B</li>
          </ul>
       </li>
         
       <li class="5 li_parent">5</li>
      </ul>
     </div>

     <div>
      <ul id="right" class="contain">
       <li class="1 li_parent">1
       <ul>
           <li>1A</li>
           <li>1B</li>
          </ul>
       </li>
          
       <li class="2 li_parent">2</li>
       <li class="3 li_parent">3
        <ul>
           <li>3A</li>
           <li>3B</li>
          </ul>
       </li>
         
       <li class="4 li_parent">4</li>
       <li class="5 li_parent">5
       <ul>
           <li>5A</li>
           <li>5B</li>
          </ul>
       </li>
          
      </ul>
     </div>
    </div>