Estou utilizando o jQueryUI - Sortable para alterar as posições dos dados em uma tabela. Porém, eu preciso salvar a posição inicial (a posição que a linha estava antes de arrastar) e a posição final (para onde a linha foi arrastada).
Essas variáveis, eu utilizarei como parâmetro para chamar uma consulta ajax
.
Minha tabela está da seguinte forma:
<h1>Classificar tabela utilizando jQuery UI</h1>
<a href='http://www.jqueryui.com/sortable/'>MjQuery UI - Sortable</a>
<table id="sort" class="grid">
<thead>
<tr><th class="index">Nº</th><th>Ano</th><th>Título</th><th>Tipo Sanguíneo</th></tr>
</thead>
<tbody>
<tr><td class="index">1</td><td>1969</td><td>Fulano de Tal</td><td>A+</td></tr>
<tr><td class="index">2</td><td>1952</td><td>Ciclano da Silva</td><td>B</td></tr>
<tr><td class="index">3</td><td>1963</td><td>Beltrano Pereira</td><td>A+</td></tr>
<tr><td class="index">4</td><td>1973</td><td>Joãozinho Mendes</td><td>C</td></tr>
<tr><td class="index">5</td><td>1965</td><td>José Ciclano</td><td>A</td></tr>
</tbody>
</table>
E estou utilizando o seguinte código para "sortear" os valores:
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index) {
$(this).width($originals.eq(index).width())
});
console.log(tr.clone());
return $helper;
},
updateIndex = function(e, ui) {
$('td.index', ui.item.parent()).each(function (i) {
$(this).html(i + 1);
console.log($(this).html(i + 1).val);
});
};
$("#sort tbody").sortable({
helper: fixHelperModified,
stop: updateIndex
}).disableSelection();
Em meu código, eu preciso criar uma variável para salvar os valores das posições (inicial e final).
Possuo um exemplo funcional no JSFiddle. Basta "arrastar e soltar" a linha, para entender melhor o que tentei explicar.