2

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.

1 Resposta 1

1

Veja esse exemplo no JSFIDDLE

Encontrei aqui StackOverFlow - Sortable Change event element position

coloquei um console.log(pos); que te mostra o retorno com começo e o final de cada movimento.

var comeco,final;
$( "#sortable" ).sortable({
    change: function(event, ui) {		
        var pos = ui.helper.index() > ui.placeholder.index() 
            ? { start: ui.helper.index(), end: ui.placeholder.index() }
            : { start: ui.placeholder.index(), end: ui.helper.index() }
       comeco = pos.start;  
        final = pos.end; 
         ui.item.startPos = ui.item.index();
        $(this)
            .children().removeClass( 'highlight' )
            .not( ui.helper ).slice( pos.start, pos.end ).addClass( 'highlight' );
    },
    stop: function(event, ui) {
        $(this).children().removeClass( 'highlight' );
        console.log("nova: " + ui.item.index());
        console.log("inicial: " + ui.item.startPos);
    }
});
#sortable { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 60%; 
}
.ui-state-default { 
    border: 1px solid #d3d3d3;
    background-color: #E4E4E4;
    margin: 0 3px 3px 3px; 
    padding: 0.4em;
    font-size: 1.4em; 
    height: 18px; 
}
.highlight{
    background-color: #B24926;	
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
    <li class="ui-state-default">Item 6</li>
    <li class="ui-state-default">Item 7</li>
    <li class="ui-state-default">Item 8</li>
    <li class="ui-state-default">Item 9</li>
</ul>

6
  • Seria quase isso. Porém, se você observar, ao arrastar para baixo, o start que e a posição inicial, mas se arrastar para cima, o end que é a posição inicial. Eu preciso que fique fixo, independente da posição que arrastar. Pois esses valores serão levados para um método e alterado no banco de dados.
    – Wise
    Commented 25/06/2015 às 20:47
  • jsfiddle.net/Wfsc6/80 Commented 25/06/2015 às 21:01
  • Eu cheguei a fazer isso @GabrielRodrigues. Porém, arraste o item 1 para o item 2 e depois retorne para a posição original. Você verá que os valores serão os mesmos. A variável começo sempre está ficando com o valor menor. Porém, se eu arrastar um item de baixo para cima, ela teria que ficar com um valor maior.
    – Wise
    Commented 26/06/2015 às 11:49
  • entendi, o seu objetivo final seria ? deixar no banco como essa grade esta configurada ? Commented 26/06/2015 às 11:54
  • A demanda seria atualizar a sequencia no banco também. Eu usei seu código como base, e fiz essas alterações, se quiser completar seu código, eu marco como correta, pois ajudou muito sua resposta. jsfiddle.net/Wfsc6/83 E se possível, traga o código para a resposta, pois o link pode não existir com o tempo.
    – Wise
    Commented 26/06/2015 às 12:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .