Cocoon (중첩 된 양식)과 jQuery를 함께 사용하여 정렬

Question

현재 Cocoon을 사용하여 입력 폼을 생성했으며이를 통해 생성 된 입력 필드를 sortable로 만들려고합니다 (jQuery-ui에서 정렬 가능).

중첩 된 형태의 코드는 다음과 같습니다

<%= f.simple_fields_for :checkout_procedures do |procedure| %> 
    <li><%= render 'checkout_procedure_fields', :f => procedure %></li> 
<% end %> 
<div class="links"> 
    <%= link_to_add_association 'add step', f, :checkout_procedures %> 
</div> 

부분이이 렌더링 (_checkout_procedure_fields)입니다 : 나는 내부를 넣어 정렬 기존의 요소를 얻을 수 있어요

<div class="checkout_procedure nested-fields"> 
    <table> 
    <tr> 
     <td><%= f.input :step %></td> 
     <td><%= link_to_remove_association "remove step", f %></td> 
    </tr> 
    </table> 
</div> 

<div>과 설정을 사용하여 jQuery를 정렬 할 수있는 :

<div class="sortThese"> 
    <%= f.simple_fields_for :checkout_procedures do |procedure| %> 
    <li><%= render 'checkout_procedure_fields', :f => procedure %></li> 
    <% end %> 
</div> 
<div class="links"> 
    <%= link_to_add_association 'add step', f, :checkout_procedures %> 
</div> 

<script> 
$(document).ready(function() { 
    $(".sortThese").sortable(); 
     }); 
</script> 

그러나 이것으로 Cocoon의 link_to_add_association 및 link_to_remove_association의 기능이 손상됩니다. <ul>을 <li>과 함께 사용하면 동일한 누에 고치 기능 장애가 발생합니다. 나는 sortable div (링크를 다시 작동하게 만드는 것)에서 각각의 입력 폼을 움직이는 자바 스크립트를 해킹하기 위해 주변을 둘러 보았지만, 분명히 이것은 비 효과적이다. 아무도 제안이 없다면 정말 고맙겠습니다!

Answer 1

<li> 태그를 제거하면 잘 정렬됩니다. 내 프로젝트에서, 동일한 마크 업을 가지고 있는데, 부분적으로 li 랩퍼를 제외하고 작동합니다.

Answer 2

부분 내에 <li> 태그가있는 경우에도 목록 항목을 새 위치로 드래그하면 목록 항목의 <li> 태그 안에있는 항목 만 이동합니다. 안타깝게도 누적 된 필드 (즉, <li> 외부) 외부에 누에 고치를 배치하기 때문에 항목을 드래그하면 항목의 숨겨진 상위 <input> 태그가 이동하지 않습니다. 따라서 목록이 브라우저에서 정렬 된 것처럼 보이더라도 변경 내용은 컨트롤러 메서드에서받은 매개 변수에 반영되지 않습니다.

해결 방법을 찾은 경우 게시하십시오.

감사