jquery - 複数のモデルでソート可能なjQuery

Question

1 つのモデルを使用した jQuery の並べ替えの例を数多く見てきましたが、2 つのモデルで役立つものはまだ見つかりません。とは言うものの...

フォルダーとタスクの 2 つのモデルがあります。

何が機能するかは次のとおりです。フォルダー内に含まれるタスクを並べ替えることができます。

ここに私が望むものがあります：タスクをあるフォルダーから別のフォルダーにドロップし、新しいフォルダーのタスクが正しくソートされるようにする機能があります（つまり、タスク＃1とタスク＃3の間でドラッグすると、新しいタスクがソートされますタスク #2 として)。誰でもこれを行う方法について支援を提供できますか?

これが私がこれまでに持っているものです：

フォルダー/index.html.erb....

<ul id="folder">
  <% @folders.each_with_index do |folder, i| %>
  <li id="folder_<%= folder.id %>"> <%= folder.name %> </li>
  <% if !folder.tasks.blank? %>
      <ul id="task">
        <% folder.tasks.each do |task| %>
            <li id="task_<%= task.id %>"><%= task.name %></li>
        <% end %>
      </ul>
  <% end %>
 <% end %>
</ul>

<script type="text/javascript">
    // Sorting the list
    $(document).ready(function(){

        $(function() {
            $('#task').sortable(
                    {
                        opacity: 0.6,
                        cursor: 'move',
                        connectWith: '#folder',

                        receive: function(event, ui) {
                            $.ajax({
                                type: 'put',
                                data: {folder_id : '#{folder.id}' },
                                dataType: 'script',
                                complete: function(request){
                                    $('#task').effect('highlight');
                                }, url: '/tasks/change_folder'
                            })
                        },

                        update: function(){
                            $.ajax({
                                type: 'post',
                                data: $('#task').sortable('serialize') ,
                                dataType: 'script',
                                complete: function(request){
                                    $('#task').effect('highlight');
                                },
                                url: '/tasks/sort'
                            })
                        }
                    });
        });
    });