Usando Cocoon (Formas anidadas) y jQuery ordenables juntos

Question

Actualmente tengo un formulario de entrada generado usando Cocoon y me gustaría hacer que los campos de entrada creados por él puedan clasificarse (usando ordenable de jQuery-ui).

El código para la forma anidada es:

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

Los parciales que se representa (_checkout_procedure_fields) es:

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

soy capaz de obtener los elementos existentes se pueden ordenar al ponerlos en el interior de un <div> y se establece que se pueden ordenar usando 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> 

Pero al hacerlo se rompe la funcionalidad de Cocoon's link_to_add_association y link_to_remove_association. El uso de <ul> con <li> también produce el mismo mal funcionamiento de Cocoon. He estado buscando para hackear algunos javascript que mueve cada entrada de entrada dentro y fuera del div ordenable (haciendo esto parece hacer que los enlaces funcionen de nuevo), pero obviamente esto es poco elegante. Si alguien tiene alguna sugerencia, ¡realmente los agradecería!

Answer 1

Se ordena bien, si elimina la etiqueta <li>. Intenté en mi proyecto, donde tengo el mismo marcado, excepto li envoltorio de parcial, y funciona.

Answer 2

Incluso con la etiqueta <li> dentro de su parcial, al arrastrar un elemento de la lista a una nueva posición solo se mueve lo que está dentro de la etiqueta <li> del elemento de la lista. Desafortunadamente, al arrastrar el elemento no se moverá la etiqueta padre oculto <input> del elemento, ya que cocoon lo coloca fuera de su campo anidado (es decir, fuera de su <li>). Por lo tanto, aunque su lista aparecerá ordenada en el navegador, los cambios no se reflejarán en los parámetros recibidos por su método de controlador.

Si ha encontrado una solución para esto, por favor publíquelo.

Gracias