링크 또는 버튼을 클릭하여 ul li 목록을 재정렬하는 방법은 무엇입니까?

Question

링크 나 버튼을 클릭하여 목록에서 일부 항목을 이동해야합니다.

사용자에게 4 가지 옵션 제공 : 선택한 항목을 모두 앞뒤로 한 번 넣거나 목록의 맨 위에 또는 모두 맨 아래에 놓습니다.

는 내가 어떤 플러그인이나 코드가 될 수있다, 나는 사실,이 플러그인을 사용할 필요가 없습니다

jquery.tinysort.js라고 사용 해요 jQuery 플러그인을 발견, 단지 제대로 작동해야합니다.

<div> 
     <p> 
      <a onclick="$('ul#ordenar>li').tsort({attr:'id'});">REFRESH ORDER</a> or 
      <a onclick="$('ul#ordenar>li').tsort('div[class=checkTrue]');">ALL SELECTED TO TOP</a> or 
      <a onclick="$('ul#ordenar>li').tsort('div[class=checkFalse]');">ALL SELECTED TO BOTTOM</a> or 
      <a>ALL SELECTED ONCE UP</a> or 
      <a>ALL SELECTED ONCE DOWN</a> 
     </p> 
     <ul class="" id="ordenar"> 
      <li id="0"><div class="checkTrue"></div>checkTrue teste0</li> 
      <li id="1"><div class="checkFalse"></div>checkFalse teste1</li> 
      <li id="2"><div class="checkFalse"></div>checkFalse teste2</li> 
      <li id="3"><div class="checkTrue"></div>checkTrue teste3</li> 
      <li id="4"><div class="checkFalse"></div>checkFalse teste4</li> 
      <li id="5"><div class="checkTrue"></div>checkTrue teste5</li> 
     </ul> 
    </div> 

ALL해야 목록의 순서 UP 선택한 후에 :

 <ul class="" id="ordenar"> 
      <li id="0"><div class="checkTrue"></div>checkTrue teste0</li> 
      <li id="1"><div class="checkFalse"></div>checkFalse teste1</li> 
      <li id="3"><div class="checkTrue"></div>checkTrue teste3</li> 
      <li id="2"><div class="checkFalse"></div>checkFalse teste2</li> 
      <li id="5"><div class="checkTrue"></div>checkTrue teste5</li>    
      <li id="4"><div class="checkFalse"></div>checkFalse teste4</li> 
     </ul> 

ALL

http://jsfiddle.net/dkwZZ/

이 html 코드를 따라 데모를 볼 수있는 링크를 따라 한 번만 선택하여 목록의 순서는 다음과 같아야합니다.

 <ul class="" id="ordenar"> 
      <li id="1"><div class="checkFalse"></div>checkFalse teste1</li> 
      <li id="0"><div class="checkTrue"></div>checkTrue teste0</li> 
      <li id="2"><div class="checkFalse"></div>checkFalse teste2</li> 
      <li id="4"><div class="checkFalse"></div>checkFalse teste4</li> 
      <li id="3"><div class="checkTrue"></div>checkTrue teste3</li> 
      <li id="5"><div class="checkTrue"></div>checkTrue teste5</li> 
     </ul> 

누군가 나를 도울 수 있으면 영원히 감사 할 것입니다. 환호성 !!!

Answer 1

지금 당장 생각해 봅니다. 여기에 플러그인없이 요소를 정렬해야하는 항목이 있습니다.

var ul=$("#ordenar"); 

function sortList(ul, order) { 
    var list=ul.children("li").get(); 
    switch(order) { 
     case 'id' : 
      list.sort(function(a, b) { 
       var compA = $(a).attr('id'), compB = $(b).attr('id'); 
       return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; 
      }); 
      $.each(list, function(idx, itm) { ul.append(itm); }); 
      break; 
     case 'class=True' : 
      list.sort(function(a, b) { 
       var compA = $(b).children(':first').attr('class'), 
        compB = $(a).children(':first').attr('class'); 
       return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; 
      }); 
      $.each(list, function(idx, itm) { ul.append(itm); }); 
      break; 
     case 'class=False' : 
      list.sort(function(a, b) { 
       var compA = $(a).children(':first').attr('class'), 
        compB = $(b).children(':first').attr('class'); 
       return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; 
      }); 
      $.each(list, function(idx, itm) { ul.append(itm); }); 
      break; 
     case 'one-up' : 
      $.each(list, function() { 
       if ($(this).children(':first').hasClass('checkTrue')) { 
        var prev = $(this).prev(); 
        if (prev.length&&prev.children(':first').hasClass('checkFalse')) {prev.before($(this));} 
       } 
      }); 
      break; 
     case 'one-down' : 
      $.each(list, function() { 
       if ($(this).children(':first').hasClass('checkTrue')) { 
        var next = $(this).next(); 
        if (next.length&&next.children(':first').hasClass('checkFalse')) {next.after($(this));} 
       } 
      }); 
      break; 
    } 
}  

FIDDLE

그런 다음 그 <a> 요소에 대한 몇 가지 아이디의 스틱과 클릭을 결합, 당신은 앵커와 상단 또는 기타 문제에 점프 창에 문제가있는 경우로 preventDefault를 사용합니다.

$("#refresh").on('click', function() {sortList(ul, 'id');}); 
$("#to_top").on('click', function() {sortList(ul, 'class=True');}); 
$("#to_bot").on('click', function() {sortList(ul, 'class=False');}); 
$("#once_up").on('click', function() {sortList(ul, 'one-up');}); 
$("#once_down").on('click', function() {sortList(ul, 'one-down');});