Jquery draggable droppable with table

Question

Hey I am using Jquery draggable droppable with table I have initialize both and its working, but the problem is the droppable area is table and the drop item is in div when I try to drop the item it show's below the table, I want the row Id on which it is placed but instead I am getting the whole table

Following are the code

JavaScript code for table

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

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

The table code is very big let me know if you can help I will happy to send you the code

I am open to any suggestion

Thank you .

Answer 1

If you want to drop the draggable on individual rows, then don't instantiate the droppable on the whole table but rather on the <tr>s of the table. Check if this code works for you:

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

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