コクーン（ネストされたフォーム）とjQueryソートを一緒に使用する

Question

現在、Cocoonを使用して入力フォームを生成していますが、それによって作成された入力フィールドをソート可能（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> 

私はの内にそれらを置くことによってソート可能な既存の要素を取得することができていますa <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>と使用すると、同じコクーンの誤動作も発生します。私はソート可能divの各入力フォームを移動するいくつかのjavascriptをハックしようとしています（これを行うとリンクが再び機能するように見えますが）明らかにこれは控えめです。誰かが何か提案があれば、本当に感謝しています！

Answer 1

<li>タグを削除するとうまくいきます。私は同じマークアップを持っている私のプロジェクトで試しましたが、li部分ラッパーを除いて動作します。

Answer 2

部分の中に<li>タグがある場合でも、リスト項目を新しい位置にドラッグすると、リスト項目の<li>タグ内にあるものだけが移動します。残念ながら、項目をドラッグすると、項目の非表示の親<input>タグは移動しません。これは、コクーンがネストしたフィールドの外に（つまり、<li>の外側に）配置するためです。したがって、リストはブラウザで並べ替えて表示されますが、変更はコントローラメソッドで受け取ったパラメータには反映されません。

解決策を見つけた場合は、投稿してください。

おかげ