Jquery draggable droppable with table - jquery-ui, draggable, droppable

Hola, estoy usando Jquery draggable droppable conla tabla inicialicé ambas y está funcionando, pero el problema es que el área que se puede soltar es la tabla y el elemento de la gota está en div cuando trato de colocar el elemento que se muestra debajo de la tabla, quiero el ID de fila en el que está ubicado pero en vez de eso estoy consiguiendo toda la mesa

Los siguientes son el código

Código JavaScript para la mesa

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

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

El código de la tabla es muy grande. Avíseme si puede ayudar. Estaré encantado de enviarle el código.

Estoy abierto a cualquier sugerencia.

Gracias .

Respuestas

Si desea soltar el elemento arrastrable en filas individuales, no cree una instancia del dropable en toda la tabla sino en la <tr>s de la mesa. Compruebe si este código funciona para usted:

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

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