0

Como pego a posição de uma td reordenada por drag and drop e envio para back em Java via ajax ?

<table th:if="${!---.isEmpty()}" id="id-table" class="table table-bordered mdl-data-table">
    <thead>
        <tr>
            <th>#</th>
            <th class="test">Pergunta</th>
            <th>Tipo</th>
            <th th:if="${----.descricao} != 'Finalizada'"></th>
        </tr>
    </thead>
    <tbody id="id-tab">

        <tr class="drag" th:each="pergunta, row : ${---.perguntas}" th:id="${pergunta.id}">
            <th th:text="${row.count}"></th>
            <td th:text="${pergunta.texto} ? ${pergunta.texto} : '-'"></td>
            <td th:text="${pergunta.tipo} ? ${pergunta.tipo.descricao} : '-'"></td>
            <td th:if="${-----.descricao} != 'Finalizada'"><a th:href="|@{/excluir-pergunta/}${---.id}/${pergunta.id}|" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Excluir"><i class="material-icons red-text">delete</i></a></td>
        </tr>
    </tbody>
</table>

Script como adpto esse ajax para meu caso..?

var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");

$.ajax({
    url : "/ordenaPergunta",
    beforeSend : function(request) {
    request.setRequestHeader(header, token);
};
async : false,
type : 'post',
data : {
    query : valor
},
success : function(data) {

}
});         

dragdrop

 $(document).ready( function() {
           $( "#id-table" ).sortable();
             $( "#id-table" ).disableSelection();
             $( "#id-table" ).draggable();
          } ); 

estou tentando pegar a nova posicao do td arrastado e mandar via ajax,ja tentei o seguinte:

 $('.drag').on('drop', function(evento ,data){
            //console.log('this.cellIndex: ' + this.cellIndex + '\n$(this),index(): ' + $(this).index());
              console.log(evento);
              console.log(data);
           // trid = $('td').attr('id');
          //console.log(trid);
        });

ou

    var linhas = document.querySelectorAll('.drag');
    var gerador = function(id){
        return function(){
            console.log(id);
        }
    }
    var i = 0;
    for(var l of linhas){
        l.addEventListener('dropactivate', gerador(i), false);
        i++;
    } 

ou

 $(function(){
     $(".drag").droppable({
          drop: function (event, ui) {
          //    alert('Arrastou ' + ui.attr('id') + ' ----- ' + event.target.id);       
          console.log( "arrastou" );
          console.log(event.target.id);
          console.log(event);
          console.log(ui);

          // console.log( ui.position );
          // console.log( ui.originalPosition); 

        }
    });
});

O problema que não consigo pegar o event de drop para saber o lugar pra onde a td foi arrastada na table, já tentei drop, dropend, dropover, dropactive, mas somente o event click é imprimido no terminal quando debugo.

3
  • O que já esteve tentando?
    – BrTkCa
    Commented 14/06/2017 às 12:23
  • Olá Gardheam! Podes mostrar o HTML que tens? Estás a usar JavaScript nativo?
    – Sergio
    Commented 14/06/2017 às 12:24
  • opa,tentei detalhar o problema,vlw Commented 14/06/2017 às 12:54

2 Respostas 2

0

Você vai usar algo assim:

$("html").on("dragover", function(event) {
    event.preventDefault();  
    event.stopPropagation();
    $(this).addClass('dragging');
});

$("html").on("dragleave", function(event) {
    event.preventDefault();  
    event.stopPropagation();
    $(this).removeClass('dragging');
});

$("html").on("drop", function(event) {
    event.preventDefault();  
    event.stopPropagation();
    alert("Dropped!");
});

Faça os testes sobre quando cada evento será disparado (não sei ao certo). Toque html por seu seletor desejado. Faça seu ajax dentro dos Eventos.

Fonte: https://stackoverflow.com/questions/19223352/jquery-ondrop-not-firing

1
0

resolvi da seguinte forma :

$(".drag").droppable({
    drop : function (event, ui) {
        console.log("DROP");
        var perguntaId = ui.draggable.attr("id");
        var index = 0;
        var id = $('body').attr("anamnese");
        setTimeout(function() {
            var table = document.getElementById("table-detalhes-anamnese");
            for (var i = 0, row; row = table.rows[i]; i++) {
                if (table.rows[i].id == perguntaId) {
                    index = i;
                }
            }
            $.ajax({
                url : _context + "/anamnese/altera-ordem-pergunta/" + id,
                beforeSend : function(request) {
                    request.setRequestHeader(header, token);
                },
                async : false,
                type : 'GET',
                data : {
                    pergunta : perguntaId,
                    index : index
                },
                success : function(result) {
                    window.location.reload();
                }
            });
        }, 10);
    }
}); 

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 .