如何使 2 个 ol 列表始终具有相同的顺序？答案

【问题标题】：How to make 2 ol lists always have the same order?如何使 2 个 ol 列表始终具有相同的顺序？
【发布时间】：2021-04-15 18:48:30
【问题描述】：

我有2个<ol>列表，第一个可以使用jquery sortable方法排序，另一个是固定的。

我想要的是强制第二个 ol li 获得与第一个中对应的 li 相同的顺序。因此，在我的示例中，如果我将 OL-1 LI n.1 与 OL-1 LI n.2 交换，则 OL-2 LI n.1 strong> 也将与 OL-2 LI n.2 交换。

可能解决方案必须封装在可排序的“停止”事件中，这就是我在示例中包含它的原因。

想不出办法。

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

【问题讨论】：

这能回答你的问题吗？ set order to jquery sortable

标签： javascript html jquery

【解决方案1】：

试试下面的sn-p

您可以在此处找到类似的答案 - jQuery UI sortable list mirror 和此处 Using Jquery UI sortable to sort 2 lists at once 我根据您的要求进行了编辑。

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>

【讨论】：