Sử dụng Cocoon (Nested Forms) và jQuery có thể sắp xếp với nhau

Question

Tôi hiện có biểu mẫu đầu vào được tạo bằng Cocoon và muốn tạo các trường nhập do nó tạo ra (có thể sắp xếp từ jQuery-ui).

Mã cho hình thức lồng nhau là:

<%= 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> 

Các phần được trả lại (_checkout_procedure_fields) là:

<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> 

tôi có thể có được các yếu tố hiện sắp xếp được bằng cách đặt chúng bên trong a <div> và đặt nó có thể sắp xếp bằng 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> 

Nhưng làm như vậy sẽ phá vỡ chức năng của số link_to_add_association và link_to_remove_association của Cocoon. Sử dụng <ul> với <li> cũng dẫn đến sự cố Cocoon giống nhau. Tôi đã nhìn xung quanh để hack một số javascript mà di chuyển mỗi hình thức đầu vào trong và ngoài của div sắp xếp (làm điều này dường như làm cho các liên kết làm việc một lần nữa), nhưng rõ ràng điều này là không phù hợp. Nếu ai có bất cứ lời đề nghị nào, tôi thực sự cảm kích họ!

Answer 1

Sắp xếp tốt, nếu bạn xóa thẻ <li>. Cố gắng trong dự án của tôi, nơi tôi có cùng một đánh dấu, ngoại trừ li wrapper một phần, và nó hoạt động.

Answer 2

Ngay cả với thẻ <li> bên trong một phần của bạn, kéo mục danh sách đến vị trí mới chỉ di chuyển nội dung nằm trong thẻ <li> của mục danh sách. Rất tiếc, việc kéo mục sẽ không di chuyển thẻ cha mẹ ẩn của mặt hàng <input> vì kén đặt nó bên ngoài trường lồng nhau của bạn (ví dụ: bên ngoài số <li>) của bạn. Do đó, mặc dù danh sách của bạn sẽ xuất hiện được sắp xếp trong trình duyệt, các thay đổi sẽ không được phản ánh trong các thông số nhận được bởi phương thức điều khiển của bạn.

Nếu bạn đã tìm thấy giải pháp cho việc này, vui lòng đăng nó.

Cảm ơn