How do I get the position of a reordered drag and drop td and send it back in 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 how do you fix this ajax for my case ..?
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();
} );
I'm trying to get the new position of the dragged td and send via ajax, already tried the following:
$('.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);
});
or
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++;
}
or
$(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);
}
});
});
The problem that I can not get the drop event to know where the td was dragged on the table, I tried drop, dropend, dropover, dropactive, but only the event click is printed on the terminal when debugging.