Move two sortable objects in different list to the same position by their class

Question

I have two lists of sortable objects

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

The code for the lists look like this:

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

I would like to sort the same numbers together. For example, if I were to take the 5 in list "left" and move it to the top, then the 5 in list "right" should also move to the top, and the reverse is true as well if I were to take the 3 from list "right" and move it to the top, then the 3 in list "left" would do the same.

Answer 1

use this js in your code and try this answer

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

your ul should be with in li for eg:- <li>1<ul><li>a</li></ul></li> and assign class name li_parent for movable 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>