Jqueryドラッグ可能なテーブルを持つdrappable - jquery-ui、draggable、droppable

ちょっと私はJqueryとdrappable drappableを使用していますテーブル私は両方とその作業を初期化しましたが、問題はドロップ可能な領域はテーブルであり、ドロップアイテムはdivにあります。テーブルの下に表示されているアイテムをドロップしようとすると、代わりに私は全体のテーブルを取得しています

以下はコードです

表のJavaScriptコード

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

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

テーブルコードが非常に大きいので、私があなたにコードを送ってくれるよう手助けできるかどうかを教えてください

私はどんな提案にも開放的です

ありがとうございました 。

回答：

ドラッグ可能なオブジェクトを個々の行にドロップしたい場合は、ドロップ可能なオブジェクトをテーブル全体にインスタンス化しないでください。 <tr>テーブルのs。このコードがあなたに適しているかどうか確認してください：

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

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