appendTo 주문시, 아마도 appendTo를 사용하는 것이 옳지 않은 것일까 요?

Question

3 개의 체크 박스를 갖고 싶습니다. checkbox1, checkbox2 및 checkbox3을 호출 할 수 있습니다.

<form id="test"> 
<div id="startingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox1" value="1" />checkbox1</div> 
<div id="clickdiv"><input type="checkbox" id="checkbox2" value="1" />checkbox2</div> 
<div id="clickdiv"><input type="checkbox" id="checkbox3" value="1" />checkbox3</div> 
</div> 
<div id="endingpoint"></div> 
</form> 

는 내가 확인란이 선택 될 때, 그래서 그것은 appendTo는 "출발점" "점을 끝"까지를 재배치하기 위해 사용을 설정합니다. 잘 작동합니다. 문제는 그들이 연대순으로 머물러 있기를 원한다는 것입니다.

<form id="test"> 
<div id="startingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox2" value="1" />checkbox2</div> 
</div> 
<div id="endingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox1" value="1" />checkbox1</div> 
<div id="clickdiv"><input type="checkbox" id="checkbox3" value="1" />checkbox3</div> 
</div> 
</form> 

하지만 ...이 appendTo가 작동하는 방식으로, 나는이 (메모를 얻을 : 나는 "checkbox3"다음 "CheckBox1을"을 선택하면

는 SO ..., 나는 결과이되고 싶어 "checkbox3는"

<form id="test"> 
<div id="startingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox2" value="1" />checkbox2</div> 
</div> 
<div id="endingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox3" value="1" />checkbox3</div> 
<div id="clickdiv"><input type="checkbox" id="checkbox1" value="1" />checkbox1</div> 
</div> 
</form> 

가 어떻게, 시간 순서가에서 시작한 특별히 순서를 유지할 수 있습니다 "CheckBox1을") 이상이다. 아마도 appendTo이 솔루션은 아니다? 응답

ADDED

은 코멘트 :

<script type="text/javascript"> 
$(function(){ 
$('#test input').attr('checked', false); 
$('#test input').click(function(){ 
    if (this.checked) { 
     $(this).closest('div').hide().appendTo("#endingpoint").fadeIn(1000) 
    } 
    else { 
     $(this).closest('div').hide().appendTo("#startingpoint").fadeIn(1000) 
    } 
}); 
}); 
</script> 

Answer 1

간단한 솔루션은 엔드 포인트의 아이들과 같은 세 개의 빈 div의이 그들을 식별하는 ID 또는 다른 속성을 사용하는 것입니다. 체크 박스가 선택되면 엔드 포인트에서 해당 div의 html이 체크 박스 html로 설정됩니다.

---

업데이트 (의견을 응답) : 당신은 설치 코드를 거기 얼마나 많은 체크 박스 관련이 있도록 할 수

. 예를 들어 속성 ​​'order'를 설정하여 객체의 색인을 가져올 수 있습니다. this.attr ('order')을 호출하여 주문 값을 가져오고 $ ('# clickDiv'+ order)에 추가합니다. ID 속성과 간단한 문자열 조작을 사용하여 동일한 효과를 낼 수도 있습니다.

Answer 2

"테스트"div에 추가 할 것으로 생각됩니다. 이 동작은 논리적입니다. 마지막에 추가 된 것이 맨 아래에 있습니다.

시도 :

$('input').click(function() { 
    $(this).insertAfter('#endingpoint'); 
); 

편집 : 글쎄, 당신은 당신의 스크립트를 추가, 지금 생각하면 어떻게 해야할지. 대신 "appendTo"의 "insertafter 속성"을 사용

Answer 3

내가 자리를 갖는 간단한 솔루션을 갈 것입니다,하지만 당신은 정말 무제한 박스 알고리즘을 원하는 경우,이 http://jsfiddle.net/rkw79/zCVGZ/ 수행 할 수 있습니다와

태그 모든 div의를 속성 : 내 원래의 게시물에서 사용되는 스크립트를 추가 한

$('#startingpoint').delegate('div.clickdiv', 'click', function() { 
    var clickeddiv = $(this).detach(); 
    if (clickeddiv.attr('order') == 0) { 
     $('#endingpoint').prepend(clickeddiv); 
    } else { 
     var inserted = false; 
     $('#endingpoint div.clickdiv').each(function(i,o) { 
      if (clickeddiv.attr('order') < $(o).attr('order')) { 
       $(o).before(clickeddiv); 
       inserted = true; 
       return false; 
      } 
     }); 
     if (!inserted) { 
      $('#endingpoint').append(clickeddiv); 
     } 
    } 
});