Quelle est la meilleure façon de créer un tableau par glisser-déposer dans les vues de rails ?

Question

Je travaille sur des rails. Dans une de mes vues, j'ai besoin de créer une liste qui peut être triée par glisser-déposer. J'ai trouvé de cette façon sur google. Mais dans ce tutoriel, ils ont utilisé act_as_list gem. Selon la documentation de cette gem, c'est ;

Un plugin ActiveRecord pour la gestion des listes. http://swanandp.github.io/acts_as_list/

J'utilise mongoid . S'il vous plaît, quelqu'un peut-il me suggérer comment je peux créer une liste de glisser-déposer dans les vues de rails pour mongoDB ?

Answer 1

J'ai créé un tableau de type glisser-déposer en utilisant la gemme jquery-ui-rails. Vous trouverez plus d'informations à ce sujet ici. aquí

en utilisant jquery j'ai fait comme ceci

    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");
        }
      });
    }
  });
});

maintenant dans l'action du contrôleur nous pouvons trier les données avec le champ de position comme ceci

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

    render nothing: true
  end

Merci.