Implementare liste ordinabili con jQuery e Rails 3

Question

Ci sono molte domande simili ma non riesco a trovarne una che soddisfi esattamente le mie esigenze.

Si potrebbe pensare che questo è un problema molto comune e ci dovrebbero essere soluzioni di gemme levigate là fuori.

Desidero riordinare l'elenco e salvare la posizione di ogni elemento nel database con ajax molto simile agli impegni in un elenco in Basecamp. Anche se sarebbe bello poter spostare gli oggetti da un livello all'altro in elenchi annidati, non ho proprio bisogno di quella funzionalità.

Sto utilizzando Rails 3.1, jQuery. Avrebbe senso integrare la soluzione con il plugin jQuery, ma sono aperto a qualsiasi soluzione.

Se non si conoscono soluzioni pronte, puoi darmi indicazioni su come procedere.

Le mie app utilizzavano il plug-in act_as_category ma non viene gestito e ho implementato manualmente tutte le altre funzionalità dell'albero.

Answer 1

C'è un post sul blog decente su questo qui:

era webtempest.com/sortable-list-in-ruby-on-rails-3-almost-unobtrusive-jquery/

mostra ancora in http://web.archive.org/web/20120315004343/http://webtempest.com/sortable-list-in-ruby-on-rails-3-almost-unobtrusive-jquery

In sostanza:

1. Il front-end utilizza jQuery UI sortable per consentire drag e-drop riordino degli elementi DOM
2. Il back-end es acts_as_list per gestire l'aggiornamento del database

Questi entrambi sembrano ragionevolmente robusti, e sono stato in grado di attuare una variazione sul funzionalità di base delineato, con la nuova creazione di oggetti sullo stesso schermo e alcuni CSS 3 campane e fischi (solo stile il .your-class.ui-sortable-helper in modo appropriato) senza tante storie. Non ho eseguito test approfonditi su tutti i browser, ma sembra felice in WebKit e Firefox.

L'esempio sul blog in realtà non utilizza acts_as_list molto - solo serialises gli ID oggetto utilizzando jQuery e poi itera su di loro nel controller direttamente - ma credo che sia utile avere queste funzioni sul back-end, se avete bisogno per automatizzare le modifiche da lì per qualche motivo.

codice chiave dal post del blog:

Javascript:

$(document).ready(function(){ 
    $('#books').sortable({ 
    axis: 'y', 
    dropOnEmpty: false, 
    handle: '.handle', 
    cursor: 'crosshair', 
    items: 'li', 
    opacity: 0.4, 
    scroll: true, 
    update: function(){ 
     $.ajax({ 
     url: '/books/sort', 
     type: 'post', 
     data: $('#books').sortable('serialize'), 
     dataType: 'script', 
     complete: function(request){ 
      $('#books').effect('highlight'); 
     } 
     }); 
    } 
    }); 
}); 

Vista:

<li id="book_<%= book.id %>"> 

Questo include un id come book_5, che permette $('#books').sortable('serialize') in JavaScript per creare una query parametro che Rails può analizzare.

Controller:

def sort 
    @books = Book.all 
    @books.each do |book| 
    book.position = params['book'].index(book.id.to_s) + 1 
    book.save 
end 

Questo potrebbe non essere appropriato, a seconda di come il modello è ambito/accesso controllato.Nella mia soluzione ho invece ripetuto lo params['book'] e incluso alcuni controlli/gestione degli errori per garantire che fossero accettati solo valori significativi.

(PS questo è abbastanza simile all'approccio Ryan Bates dà nel suo, paywalled, videocast sullo stesso argomento.)

(PPS Sono consapevole questa è una vecchia questione, ma, come in modo spesso con StackOverflow, Google mi ha ottenuto qui, quindi ho pensato di documentare ciò che ho fatto.)