Riordina le righe della tabella HTML utilizzando il drag-and-drop

Question

Ho una funzione jQuery per spostare le righe della tabella su e giù. Non so come salvare i dati, né ottenere la posizione di ogni riga. Sto usando PHP per mostrare le righe della tabella.

Come si ottiene il valore della posizione di ogni riga della tabella quando l'utente riordina le righe della tabella?

Answer 1

grazie a Jim Petkus che ha fatto mi ha dato una risposta meravigliosa. ma stavo cercando di risolvere il mio script per non cambiarlo in un altro plugin. Il mio obiettivo principale non era usare un plugin indipendente e fare ciò che volevo semplicemente usando il core jquery!

e indovina cosa ho trovato il problema.

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

questo è quello che aggiungo alla mia sceneggiatura e il fatto esplodere i codici al mio html parte:

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

e ho trovato ogni valore di riga $ peso

grazie ancora a Jim Petkus

Answer 2

Si consiglia di guardare jQuery Sortable. L'ho usato per riordinare le righe della tabella.

Answer 3

L'interfaccia utente jQuery sortable plugin fornisce il riordino del trascinamento. Un pulsante di salvataggio può estrarre gli ID di ciascun elemento per creare una stringa delimitata da virgole di tali ID, aggiunta a una casella di testo nascosta. La casella di testo viene restituita al server utilizzando un postback asincrono.

Questo fiddle example riordina gli elementi della tabella, ma non li salva in un database.

Il plugin ordinabile prende una riga di codice per trasformare qualsiasi lista in una lista ordinabile. Se ti interessa usarli, fornisce anche CSS e immagini per fornire un impatto visivo alla lista ordinabile (vedi l'esempio a cui mi sono collegato). Gli sviluppatori, tuttavia, devono fornire il codice per recuperare gli oggetti nel loro nuovo ordine. Inserisco ID univoci di ciascun elemento nell'elenco come attributo HTML e quindi recupero quegli ID tramite jQuery.

Ad esempio:

// ----- 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

Io ci sto lavorando bene

<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

facile per il plugin 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/

Demo: http://jsfiddle.net/DenisHo/dxpLrcd9/embedded/result/

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

Answer 6

A quanto pare la domanda descrive mal problema del PO, ma questa domanda è il risultato della ricerca in alto per il trascinamento per riordinare le righe della tabella, quindi w cappello risponderò.Non ero interessato a portare in jQuery UI per una cosa così semplice, ecco un unica soluzione 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 e i > 0 ignora la prima fila, che per me contiene TH tag. Sostituisci alert con la tua logica "trascinamento finito".