목록을 정렬하고 순서를 다른 순서로 표시합니다.

jQuery-Ui의 정렬 가능을 사용하고 있습니다. 한 목록의 내용을 정렬 할 수는 있지만 새로 정렬 된 이전 목록을 기반으로 다른 목록 순서에 영향을주는 방법을 놓치게됩니다.목록을 정렬하고 순서를 다른 순서로 표시합니다.

기본적으로 #smalllist를 정렬하고 나서 정렬을 완료하면 #smalllist의 순서에 따라 #biglist를 자동으로 정렬하고 DOM 내에 즉시 표시되도록합니다. 이 같은

<html> 
<head> 
    <title>Sorting Example</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
     jQuery(document).ready(function($){ 
      $("#smalllist").sortable(); 
     }); 
    </script> 
    <style type="text/css"> 

     li { 
      list-style-type: none; 
      float: left; 
     } 
     #biglist img{ 
      width: 300px; 
      height: 200px; 
     } 
     #bigpics{ 
      position: absolute; 
      top: 400px; 
     } 
     #smalllist{ 
      cursor: move; 
     } 
    </style> 
</head> 
<body> 
    <div id="smallicons"> 
     <ul id="smalllist"> 
      <li id='s_1'><img src="img/article01_small.jpg" /></li> 
      <li id='s_2'><img src="img/article02_small.jpg" /></li> 
      <li id='s_3'><img src="img/article03_small.jpg" /></li> 
      <li id='s_4'><img src="img/article04_small.jpg" /></li> 
     </ul> 
    </div> 
    <div id="bigpics"> 
     <ul id="biglist"> 
      <li id='b_1'><img src="img/article01.jpg" /></li> 
      <li id='b_2'><img src="img/article02.jpg" /></li> 
      <li id='b_3'><img src="img/article03.jpg" /></li> 
      <li id='b_4'><img src="img/article04.jpg" /></li> 
     </ul> 
    </div> 
</body> 
</html>

출처

2013-05-23 Ryan Duffing

시도 뭔가 : 여기 내 코드입니다

jQuery(document).ready(function($){ 
    $("#smalllist").sortable({ 
     update: function(event, ui) { 
      $("li","#smalllist").each(function() { 
       console.log(this) 
       $('#' + this.id.replace('s_','b_')).appendTo('#biglist'); 
      }); 
     } 
    }); 
});

출처

2013-05-23 01:20:42 adeneo

이 #biglist에서 항목을 이동하지,하지만 동시에 그들을 이동하고, 때로는 #biglist이 순서를 반영하지 않습니다 #smalllist. 목록을 비동기 적으로 정렬하고 싶습니다. –

@RyanDuffing - 비동기 적으로 무슨 뜻인지 알 수 없습니까? 어쩌면 업데이트 이벤트를 시도해보십시오. 그 이벤트가 정렬 후 실행되면 응답이 편집됩니까? – adeneo

새 솔루션이 작동합니다. 정말 고마워. 비동기 적으로 #blist가 #smalllist가 완료된 직후에 정렬되기를 원했습니다. 적어도 그것이 제가 한 단어가 의미하는 것입니다. –

목록을 정렬하고 순서를 다른 순서로 표시합니다.

답변

관련 문제