レールビューにドラッグ＆ドロップテーブルを作成するより良い方法は何ですか？

Question

私はレールを取り組んでいます。私の意見の1つでは、ドラッグ＆ドロップ方式でソートできるリストを作成する必要があります。 Googleでthis wayが見つかりました。しかし、そのチュートリアルでは、彼らはact_as_list gemを使っていました。この宝石の文書によると、

リストを管理するためのActiveRecordプラグイン。 http://swanandp.github.io/acts_as_list/

私はmongoidを使用しています。私はmongoDBのために、どのようにドラッグ・アンド・ドロップ・リストをレール・ビューに作成することができますか？

Answer 1

gem jquery-ui-railsを使用してドラッグ＆ドロップテーブルを作成しました。ここにあなたがより多くの情報私はこのような

jQuery(function($) { 
    if ($('#table_body_id').length > 0) { 
    table_width = $('#table_body_id').width(); 
    cells = $('.table').find('tr')[0].cells.length; 
    desired_width = table_width/cells + 'px'; 
    $('.table td').css('width', desired_width); 
    } 

    $('#table_body_id').sortable({ 
    axis: 'y', 
    cursor: 'move', 
    containment: '.table-responsive', 
    sort: function(e, ui) { 
     ui.item.addClass('active-item-shadow'); 
    }, 
    stop: function(e, ui) { 
     ui.item.removeClass('active-item-shadow'); 
     ui.item.children('td').effect('highlight', {}, 1000); 
    }, 
    update: function(event, ui) { 
     var all_row_ids = $(this).sortable('toArray', { attribute: 'table_row_id' }); 
     $.ajax({ 
     url: 'my_url_to_sort', 
     method: 'POST', 
     data: { 
      ids: all_row_ids 
     }, 
     success: function(){ 
      $('#table_body_id > tr').each(function(i, tr) { 
      $('.index:first', this).html(i + 1); 
      }); 

      console.log("success"); 
     } 
     }); 
    } 
    }); 
}); 

を行っているjqueryのを使用してhere

は今、コントローラのアクションで、我々はこの

def sort 
     params[:ids].each_with_index do |id, index| 
     ModelName.where(id: id).update(position: index+1) 
    end 

    render nothing: true 
    end 

のような位置フィールドでデータを整理することができます見つけることができますありがとうございました。