Mam listę 2 <ol>, najpierw można posortować metodę sortowania jQuery, druga jest stała.

Chcę zmusić drugiego OL, aby uzyskać taką samą kolejność jak odpowiadający im, w pierwszej kolejności. Więc w moim przykładzie, jeśli zamieniam OL-1 LI N.1 z OL-1 LI N.2 OL-2 LI N.1 zamieni się również z OL-2 LI N.2 .

Prawdopodobnie rozwiązanie musi zostać zamknięte wewnątrz imprezy "stop", dlatego włączyłem go w przykładzie.

Nie mogę myśleć drogi.

$('#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>
0
VaggelisNos 15 kwiecień 2021, 21:48

1 odpowiedź

Najlepsza odpowiedź

Wypróbuj poniższy fragment

Możesz znaleźć podobną odpowiedź tutaj - JQUERY UI Lista listy listy i tutaj Korzystanie z jQuery UI Sortowalne Aby sortować 2 listy od razu edytowany zgodnie z wymaganiami.

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>
1
Bhautik 15 kwiecień 2021, 19:12