imagenes - tablas en html5

¿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

De acuerdo, hice un poco más de búsqueda y descubrí 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 / factices.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 ids y se activa en el drop.

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

Answer 2

He usado la biblioteca de la interfaz de usuario de Yahoo para hacer esto antes:

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

Answer 3

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

Answer 4

Scriptaculous sortables parece ser el camino a seguir, ya que está integrado. Http://github.com/madrobby/scriptaculous/wikis/sortable

Answer 5

Los sortables de MooTools 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 de MooTools de hacer que un nuevo elemento añadido sea ordenable es simplemente:

sortables.addItems(node);

Answer 6

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

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

Tendrá que escribir un código para persistir, 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'');
    }
});