Reordenar las filas de la tabla HTML usando arrastrar y soltar

Question

Tengo una función jQuery para mover las filas de la tabla hacia arriba y hacia abajo. No sé cómo guardar los datos, ni obtener la posición de cada fila. Estoy usando PHP para mostrar las filas de la tabla.

¿Cómo obtengo el valor de posición de cada fila de la tabla cuando el usuario reordena las filas de la tabla?

Answer 1

gracias a Jim Petkus que hizo me dio una respuesta maravillosa. pero estaba tratando de resolver mi propio script para no cambiarlo a otro plugin. Mi objetivo principal no era utilizar un plugin independiente y hacer lo que quería simplemente usando el núcleo de jquery.

y adivina qué encontré el problema.

var title = $("em").attr("title"); 
$("div").text(title); 

esto es lo que agrego a mi guión y los códigos para mi parte html sopló:

<td> <em title=\"$weight\">$weight</em></td> 

y encontré cada fila $ valor de peso

gracias de nuevo a Jim Petkus

Answer 2

Es posible que desee mirar jQuery Sortable. Lo usé para reordenar las filas de la tabla.

Answer 3

jQuery UI sortable plugin proporciona reordenación de arrastrar y soltar. Un botón de guardar puede extraer los identificadores de cada elemento para crear una cadena delimitada por comas de esos ID, agregados a un cuadro de texto oculto. El cuadro de texto se devuelve al servidor utilizando una devolución de datos asincrónica.

Este fiddle example reordena los elementos de la tabla, pero no los guarda en una base de datos.

El complemento ordenable toma una línea de código para convertir cualquier lista en una lista ordenable. Si le interesa usarlos, también proporciona CSS e imágenes para proporcionar un impacto visual a la lista ordenable (vea el ejemplo al que me he vinculado). Los desarrolladores, sin embargo, deben proporcionar código para recuperar elementos en su nuevo orden. Incrusto ID únicos de cada elemento en la lista como un atributo HTML y luego recupero esos ID a través de jQuery.

Por ejemplo:

// ----- code executed when the document loads 
$(function() { 
    wireReorderList(); 
}); 

function wireReorderList() { 
    $("#reorderExampleItems").sortable(); 
    $("#reorderExampleItems").disableSelection(); 
} 

function saveOrderClick() { 
    // ----- Retrieve the li items inside our sortable list 
    var items = $("#reorderExampleItems li"); 

    var linkIDs = [items.size()]; 
    var index = 0; 

    // ----- Iterate through each li, extracting the ID embedded as an attribute 
    items.each(
     function(intIndex) { 
      linkIDs[index] = $(this).attr("ExampleItemID"); 
      index++; 
     }); 

    $get("<%=txtExampleItemsOrder.ClientID %>").value = linkIDs.join(","); 
} 

Answer 4

Estoy trabajando bien con él

<script> 
    $(function() { 

     $("#catalog tbody tr").draggable({ 
      appendTo:"body", 
      helper:"clone" 
     }); 
     $("#cart tbody").droppable({ 
      activeClass:"ui-state-default", 
      hoverClass:"ui-state-hover", 
      accept:":not(.ui-sortable-helper)", 
      drop:function (event, ui) { 
       $('.placeholder').remove(); 
       row = ui.draggable; 
       $(this).append(row); 
      } 
     }); 
    }); 
</script> 

Answer 5

Fácil para el plugin de jQuery TableDnd

$(document).ready(function() { 

    // Initialise the first table (as before) 
    $("#table-1").tableDnD(); 

    // Make a nice striped effect on the table 
    $("#table-2 tr:even').addClass('alt')"); 

    // Initialise the second table specifying a dragClass and an onDrop function that will display an alert 
    $("#table-2").tableDnD({ 
     onDragClass: "myDragClass", 
     onDrop: function(table, row) { 
      var rows = table.tBodies[0].rows; 
      var debugStr = "Row dropped was "+row.id+". New order: "; 
      for (var i=0; i<rows.length; i++) { 
       debugStr += rows[i].id+" "; 
      } 
      $(table).parent().find('.result').text(debugStr); 
     }, 
     onDragStart: function(table, row) { 
      $(table).parent().find('.result').text("Started dragging row "+row.id); 
     } 
    }); 
}); 

Plugin (TableDnD): https://github.com/isocra/TableDnD/

Demostración: http://jsfiddle.net/DenisHo/dxpLrcd9/embedded/result/

CDN: https://cdn.jsdelivr.net/jquery.tablednd/0.8/jquery.tablednd.0.8.min.js

Answer 6

Al parecer, la pregunta mal describe el problema de la OP, pero esta pregunta es el resultado de búsqueda superior para arrastrar para reordenar las filas de la tabla, por lo que es w voy a responder.No estaba interesado en traer jQuery UI para algo tan simple, por lo que aquí hay una única solución jQuery:

<style> 
.grab { cursor: grab; } 
.grabbed { box-shadow: 0 0 13px #000; } 
.grabCursor, .grabCursor * { cursor: grabbing !important; } 
</style> 

<table> 
<tr><th>...</th></tr> 
<tr><td class="grab">&#9776;</td><td>...</td></tr> 
</table> 

<script> 
$(".grab").mousedown(function (e) { 
    var tr = $(e.target).closest("TR"), si = tr.index(), sy = e.pageY, b = $(document.body), drag; 
    if (si == 0) return; 
    b.addClass("grabCursor").css("userSelect", "none"); 
    tr.addClass("grabbed"); 
    function move (e) { 
     if (!drag && Math.abs(e.pageY - sy) < 10) return; 
     drag = true; 
     tr.siblings().each(function() { 
      var s = $(this), i = s.index(), y = s.offset().top; 
      if (i > 0 && e.pageY >= y && e.pageY < y + s.outerHeight()) { 
       if (i < tr.index()) 
        s.insertAfter(tr); 
       else 
        s.insertBefore(tr); 
       return false; 
      } 
     }); 
    } 
    function up (e) { 
     if (drag && si != tr.index()) { 
      drag = false; 
      alert("moved!"); 
     } 
     $(document).unbind("mousemove", move).unbind("mouseup", up); 
     b.removeClass("grabCursor").css("userSelect", "none"); 
     tr.removeClass("grabbed"); 
    } 
    $(document).mousemove(move).mouseup(up); 
}); 
</script> 

Nota si == 0 y i > 0 hace caso omiso de la primera fila, que para mí contiene TH etiquetas. Reemplace el alert con su lógica de "arrastre terminado".