Implementar listas ordenables ajax con jQuery y Rails 3

Question

Hay muchas preguntas similares pero no puedo encontrar una que satisfaga exactamente mis necesidades.

Pensarías que este es un problema muy común y que debería haber soluciones de gemas pulidas.

Quiero reordenar la lista y guardar la posición de cada elemento en la base de datos con ajax muy parecido a los elementos pendientes de una lista en Basecamp. Aunque sería bueno poder mover elementos de un nivel a otro en listas anidadas, realmente no necesito esa característica.

Estoy usando Rails 3.1, jQuery. Tendría sentido integrar la solución con el plugin jQuery ordenable, pero estoy abierto a cualquier solución.

Si no sabe de alguna solución preparada, ¿puede darme consejos sobre cómo hacerlo?

Mis aplicaciones solían usar el complemento acts_as_category pero no se actualiza y he implementado todas las otras características del árbol manualmente.

Answer 1

Hay una entrada en el blog decente en esta aquí:

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

todavía muestra en http://web.archive.org/web/20120315004343/http://webtempest.com/sortable-list-in-ruby-on-rails-3-almost-unobtrusive-jquery

Esencialmente:

1. El front-end utiliza jQuery UI sortable para permitir arrastrar y reposición de elementos de DOM
2. El back-end ES acts_as_list para manejar la actualización de la base de datos

Estos dos parecen bastante robusta, y yo era capaz de poner en práctica una variante de la funcionalidad básica se indica, la nueva creación de objetos en la misma pantalla y un poco de CSS 3 campanas y silbatos (solo estilo el .your-class.ui-sortable-helper apropiadamente) sin mucho alboroto. No he probado exhaustivamente en todos los navegadores, pero parece feliz en WebKit y Firefox.

El ejemplo en el blog realmente no usa mucho actions_as_list - simplemente serializa los ID de objeto usando jQuery y luego itera sobre ellos en el controlador directamente - pero supongo que es útil tener esas funciones en el back-end si necesita para automatizar los cambios desde allí por alguna razón.

Código de la llave de la entrada en el 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 %>"> 

Esto incluye un identificador como book_5, que permite $('#books').sortable('serialize') en el Javascript para crear una consulta parámetro que Rails puede analizar.

controlador:

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

Esto podría no ser apropiada, en función de cómo está en el ámbito/acceso controlado su modelo.En mi propia solución, repetí en iteración el params['book'], e incluí algunos controles/manejo de errores para garantizar que solo se aceptaran valores significativos.

(PS Esto es muy similar al enfoque de Ryan Bates da en la suya, paywalled, videocasts sobre el mismo tema.)

(PPS Soy consciente de que esto es una vieja pregunta, pero, como tantas a menudo con StackOverflow, Google me consiguió aquí, así que pensé en documentar lo que hice.)