同时使用Cocoon（嵌套表单）和jQuery sortable

我目前有一个使用Cocoon生成的输入表单，并希望使它创建的输入字段可排序（使用jQueryUI中的可排序）

嵌套表单的代码为：

<%= 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）是：

我可以通过将现有元素放入

中并使用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>

程序%>
$（文档）.ready（函数（）{
$（“.sort这些”）.sortable（）；
});

---

但这样做会破坏Cocoon的

链接到添加关联

和

链接到删除关联

的功能。将

与

一起使用也会导致相同的茧故障。我一直在寻找一些javascript，这些javascript可以将每个输入表单移入或移出可排序的div（这样做似乎可以使链接再次工作），但显然这是不雅观的。如果有人有任何建议，我将非常感谢

如果您删除

标记，它会很好地排序。在我的项目中尝试过，我有相同的标记，除了分部的

li

wrapper之外，它是有效的。

即使分部中有

标记，将列表项拖动到新位置只会移动列表项的
标记中的内容。不幸的是，拖动项目将不会移动项目的隐藏父标记，因为cocoon会将其放置在嵌套字段之外（即
）。因此，尽管列表将在浏览器中显示为已排序，但更改不会反映在控制器方法接收的参数中

如果你已经找到了解决方案，请发布它

谢谢
不确定从哪个版本开始，但是目前rails的
字段（由
的

简单字段包装）为id添加了一个隐藏的输入字段。您可以跳过此操作，方法是为的

简单字段提供选项
：include\u id=>false
。这将删除隐藏的输入，然后排序将再次像以前一样工作。谢谢@nathanvda。这对我有用。我唯一需要更改的另一件事是在部分字段中添加id作为隐藏输入，因为我仍然需要嵌套对象的id。
<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>