JQuery arrastável dropável com tabela - jquery-ui, arrastável, dropável

Ei, eu estou usando JQuery draggable droppable comEu tenho inicializar ambos e seu trabalho, mas o problema é a área droppable é a tabela e o item drop está em div quando eu tento soltar o item que ele mostra abaixo da tabela, eu quero o ID da linha em que é colocado mas em vez disso eu estou recebendo toda a mesa

A seguir estão o código

Código JavaScript para tabela

$(function() {
$( "#draggable" ).draggable({ axis: "y" });

$( "#droppable" ).droppable({
drop: function(event, ui) {
console.log($(this).find("tr.pen"))
$(this).append($(ui.draggable));
}
});
});

O código da tabela é muito grande, deixe-me saber se você pode ajudar eu ficarei feliz em lhe enviar o código

Estou aberto a qualquer sugestão

Obrigado .

Respostas:

Se você quiser soltar o arrastável em linhas individuais, então não instancie o droppable em toda a tabela, mas sim no <tr>s da mesa. Verifique se este código funciona para você:

$(function() {
$( "#draggable" ).draggable({ axis: "y" });

$( "#droppable tr" ).droppable({
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
});