0

I have the following 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 even 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) ;
       }
   });
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Régis
  • 1

2 Answers2

0

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).

Community
  • 1
  • 1
sje397
  • 41,293
  • 8
  • 87
  • 103
0

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.

Régis
  • 1