How to make 2 ol lists always have the same order?

Question

I have 2 <ol> lists,first one can be sorted using the jquery sortable method,the other one is fixed.

What i want is to force the second ol li's to get the same order as their corresponding li's in the first one. So in my example,if i swap OL-1 LI n.1 with OL-1 LI n.2 the OL-2 LI n.1 will swap with OL-2 LI n.2 as well.

Probably the solution has to be encapsuled inside the sortable "stop" event,that why i included it in the example.

Cant think of a way.

$('#sortable').sortable({
       revert : true,
       delay: 150,
       stop : function(event,ui){
 
}
 });

*{user-select: none;}
li{
border:thin solid black;
width:90px;
margin:5px;
text-align:center;
background:white;
cursor:grab;
}
div{
border:thin solid black;
float:left;
position:relative;
box-sizing: border-box;

}
ol{
border:thin solid black;
float:left;
position:relative;
box-sizing: border-box;
margin-right:5px;

}

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />
</head>
<body>
<ol id="sortable">SORTABLE
<li>OL-1 LI n.1</li>
<li>OL-1 LI n.2</li>
<li>OL-1 LI n.3</li>
<li>OL-1 LI n.4</li>
</ol>
<ol>FIXED
<li >OL-2 LI n.1</div>
<li >OL-2 LI n.2</div>
<li >OL-2 LI n.3</div>
<li >OL-2 LI n.4</div>
</ol>
</body>
</html>

Does this answer your question? [set order to jquery sortable](https://stackoverflow.com/questions/11870024/set-order-to-jquery-sortable) — s.kuznetsov, Apr 15 '21 at 19:07

Bhautik · Accepted Answer · 2021-04-15T19:12:07.757

Try The below snippet

You can find a similar answer here - jQuery UI sortable list mirror and here Using Jquery UI sortable to sort 2 lists at once I edited as per your requirement.

var sortableIndex;
var sortableNewIndex;

var FixedoriginalIndex;
var FixedNewImage;

var fixed = $("#fixed");

$('#sortable').sortable({
       revert : true,
       delay: 150,
        start:function(ev,ui){
          sortableIndex = ui.item.index();
          FixedoriginalIndex = fixed[0].children[sortableIndex];
      },
      stop:function(ev,ui){
          sortableNewIndex = ui.item.index();
          FixedNewImage = fixed[0].children[sortableNewIndex];        
          if(sortableIndex < sortableNewIndex){
              $(FixedNewImage).after(FixedoriginalIndex);
          }else{
              $(FixedNewImage).before(FixedoriginalIndex);
          }
      }
 });

*{user-select: none;}
li{
border:thin solid black;
width:90px;
margin:5px;
text-align:center;
background:white;
cursor:grab;
}
div{
border:thin solid black;
float:left;
position:relative;
box-sizing: border-box;

}
ol{
border:thin solid black;
float:left;
position:relative;
box-sizing: border-box;
margin-right:5px;

}

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />
</head>
<body>
<ol id="sortable">SORTABLE
<li>OL-1 LI n.1</li>
<li>OL-1 LI n.2</li>
<li>OL-1 LI n.3</li>
<li>OL-1 LI n.4</li>
</ol>
<ol id="fixed">FIXED
<li >OL-2 LI n.1</div>
<li >OL-2 LI n.2</div>
<li >OL-2 LI n.3</div>
<li >OL-2 LI n.4</div>
</ol>
</body>
</html>

How to make 2 ol lists always have the same order?

1 Answers1