jQuery and drop in table

Question

I have the folowing code. When the table is empty in need to append to ti but if there's rows I need to insertBefore the row on which I drop. But the drop is only detected on the TABLE, the trace only show table evne if I drop on a tr

    $("#mytable TABLE, #mytable TABLE").droppable({
       drop: function(event, ui)
       {
        var target = $(event.target);
        var draggable = ui.draggable;

        trace(target[0].tagName) ;
       }
   });

Answer 1

I'm sure it could be neatened up, but here's something that seems to work:

function dropRow(event, ui) {
    var target = $(event.target);
    var draggable = ui.draggable;

    var tr = $('<tr><td>' + draggable.text() + '</td></tr>');
    target.before(tr);
    tr.droppable({ drop: dropRow, greedy: true });    
}

function dropTable(event, ui) {
    var target = $(event.target);
    var draggable = ui.draggable;

    var tr = $('<tr><td>' + draggable.text() + '</td></tr>');
    target.append(tr);
    tr.droppable({ drop: dropRow, greedy: true });    
}


$("#mytable").droppable({
    drop: dropTable
});​

This question may relate - part of your issue is hooking up the 'drop' event to elements that don't exist yet (and 'live' doesn't handle 'drop' either).

Answer 2

My bad, the problem is that the TR is the one that are dropped, so they don't exist at the init it's the raison that only the table react. So I init the drop on all TR in the page (the 2 tables) so when the TR from the first table are dropped in the second they react when an other TR is drop on them.

But I need to find a neatest way of initializing dropped TR. Don't know if reinit all TR in the second table on each new row is a good way of doing it.