jquery uiからドラッグ可能およびドロップ可能を使用してテーブル間で行を渡そうとする2つのテーブルがあります
ドラッグアンドドロップは問題なくできますが、「ドロップされた」要素は「ドロップ可能」ではありません。テーブル 1 からテーブル 2 に行を移動する場合と同様に、機能します。ただし、別の行をテーブル 1 からテーブル 2 に移動しようとすると、ページが読み込まれたときに最初にテーブル 2 にあった要素の 1 つにドロップした場合にのみ機能します。テーブル 2 に移動したテーブル 1 の要素にはドロップしません。
ドロップされた要素をドロップ可能にするために、このイベントを再バインドするにはどうすればよいですか?
$("#inventor tr").draggable({
helper: "clone",
start: function(event, ui) {
c.tr = this;
c.helper = ui.helper;
}
});
var c = {};
$("#invention tr").droppable({
drop: function(event, ui) {
var $row = $(c.tr);
var name = $row.find('td:eq(0)').html();
var age = $row.find('td:eq(1)').html();
var sex = $row.find('td:eq(2)').html();
var group = $row.find('td:eq(3)').html();
var pref = $row.find('td:eq(4)').html();
var stringToAppend = "<tr><td>"+name+"<span>"+age+" • "+sex+" • "+group+"</span></td></tr>";
$("#invention table tbody").append(stringToAppend);
$(c.tr).remove(); //remove from previous
$(c.helper).remove(); //remove clone
}
});