Verwendung von Cocoon (verschachtelte Forms) und jQuery zusammen sortierbar

Question

Ich habe derzeit ein Eingabeformular mit Cocoon generiert und möchte die Eingabefelder von sortierbaren erstellen (mit sortierbaren von jQuery-Ui).

Der Code für die verschachtelte Form ist:

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

Die partielle dass gemacht wird (_checkout_procedure_fields) ist:

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

Ich bin in der Lage sortierbar die vorhandenen Elemente zu erhalten, indem sie innerhalb des Setzens ein <div> und wenn er sortierbar mit 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> 

Aber das bricht die Funktionalität von Cocoons link_to_add_association und link_to_remove_association. Die Verwendung von <ul> mit <li> führt ebenfalls zur gleichen Cocoon-Fehlfunktion. Ich habe mich umgesehen, um etwas Javascript zu hacken, das jedes Eingabeformular in das sortierbare div bringt (dies scheint die Links wieder funktionieren zu lassen), aber das ist offensichtlich unelegant. Wenn jemand irgendwelche Vorschläge hat, würde ich sie wirklich schätzen!

Answer 1

Es sortiert gut, wenn Sie <li> entfernen. Versucht in meinem Projekt, wo ich das gleiche Markup habe, außer li Wrapper von Teil, und es funktioniert.

Answer 2

Auch mit dem Tag <li> in Ihrem Partial, verschiebt das Ziehen eines Listenelements an eine neue Position nur das, was sich im Tag <li> des Listenelements befindet. Durch das Ziehen des Elements wird das ausgeblendete übergeordnete Element <input> des Elements leider nicht verschoben, da es außerhalb des verschachtelten Feldes platziert wird (d. H. Außerhalb der <li>). Daher wird Ihre Liste zwar im Browser sortiert angezeigt, die Änderungen werden jedoch nicht in den Parametern angezeigt, die von Ihrer Controller-Methode empfangen werden.

Wenn Sie eine Lösung dafür gefunden haben, senden Sie sie bitte.

Dank