¿Cuál es la forma más sencilla de permitir que un usuario arrastre y suelte las filas de la tabla para cambiar su orden?

Question

Tengo una aplicación Ruby on Rails que estoy escribiendo donde un usuario tiene la opción de editar una factura. Deben poder reasignar el orden de las filas. Ahora mismo tengo una columna de índice en el archivo db que se usa como el mecanismo de clasificación predeterminado. Acabo de exponer eso y permití al usuario editarlo.

Esto no es muy elegante. Me gustaría que el usuario pueda arrastrar y soltar las filas de la tabla. He usado Scriptaculous y Prototype un poco y estoy familiarizado con ellos. He hecho listas de arrastrar y soltar, pero no he hecho filas de tablas como esta. ¿Alguien tiene alguna sugerencia para reordenar y capturar el reordenamiento de manera eficiente?

Además, el usuario puede crear dinámicamente una nueva fila en JS en este momento, por lo que esa fila también debe ser reorientable.

Puntos de bonificación si se puede hacer con RJS en lugar de JavaScript directo.

Answer 1

he utilizado la biblioteca de interfaz de usuario Yahoo hacer esto antes:

http://developer.yahoo.com/yui/dragdrop/

Answer 2

sortables Scriptaculous parece como el camino a seguir, ya que está construido en http://github.com/madrobby/scriptaculous/wikis/sortable

Answer 3

La interfaz de Yahoo era. más fácil de lo que esperaba, tenía algo elegante trabajando en menos de cuatro horas.

Answer 4

MooTools sortables son en realidad mejores que script.aculo.us porque son dinámicos; MooTools permite la adición/eliminación de elementos a la lista. Cuando se agrega un nuevo elemento a un script.aculo.us ordenable, debe destruir/recrear el ordenable para hacer que el nuevo elemento se pueda ordenar. Habrá muchos gastos al hacerlo si la lista tiene muchos elementos. Tuve que cambiarme de script.aculo.us a las MooTools más livianas solo por esta limitación y terminé extremadamente feliz con esa decisión.

La forma MooTools de hacer un elemento recién añadido sortable es simplemente:

sortables.addItems(node); 

Answer 5

bien, he hecho un poco más de fregado y di cuenta de algo que parece estar funcionando en su mayoría.

edit.html.erb:

... 
<table id="invoices"> 
    <thead> 
    <tr> 
     <th>Id</th> 
     <th>Description</th> 
    </tr> 
    </thead> 
    <tbody id="line_items"> 
     <%= render :partial => 'invoice_line_item', :collection => @invoice.invoice_line_items.sort %> 
    </tbody> 
</table> 

<%= sortable_element('line_items', {:url => {:action => :update_index}, :tag => :tr, :constraint => :vertical}) -%> 
... 

app/controllers/invoices.rb

... 
def update_index 
    params["line_items"].each_with_index do |id, index| 
    InvoiceLineItem.update(id, :index => index) 
    end 
    render :nothing => true 
end 
... 

La parte importante es: tag =>: tr en "sortable_element" y params [ "line_items "] - esto da la nueva lista de identificadores y se activa en la caída.

Detrimentos: Hace que la llamada AJAX se suelte, creo que preferiría almacenar la orden y actualizarla cuando el usuario presione "guardar". No probado en IE.

Answer 6

me gusta jQuery http://docs.jquery.com/UI/Sortables

$ ("# miLista") ordenable ({}).;

Tendrá que escribir un código para conservarlo, pero no es tan difícil.

Answer 7

Con Prototype y Scriptaculous:

Sortable.create('yourTable', { 
    tag: 'tr', 
    handles: $$('a.move'), 
    onUpdate: function() { 
     console.log('onUpdate'); 
    } 
});