ドロップされた要素の検索

Question

チェス盤を作成していて、その要素がドロップされたテーブル要素を見つけようとしています。残念ながら、ドロップイベントはまったく発生していないようです。ドロップイベントが発射されていない理由

https://jsfiddle.net/thwee3/hhxt84k1/

$('.piece').draggable(); 
$('.pieces').droppable({ 
    drop: function(){ 
    alert($(this).attr('id')); // should give me the number of the field 
    } 
}); 

これは私がこれまで持っているもの、誰かが私を伝えることができていますか？

Answer 1

div要素が表示されます高さゼロ。だから、あなたが正方形の上に落ちると、あなたはtdの要素にぶつかります。 CSS

.tile { 
    height: 100%; 
} 

を追加

試してみて、彼らは

<td><div id="0" class="field"></div class="tile"></td> 

になるので、あなたのdivにクラスタイルを追加し、あなたが作ったエラーを前提とした

$('.piece').draggable(); 
$('.tile').droppable({ 
    drop: function(){ 
    alert($(this).attr('id')); // should give me the number of the field 
    } 
}); 

にコードを変更div要素は親を埋めます。あなたはそれの良い会社にいる。 divのデバッグについて読んだ一番のヒントは、divに背景色を適用して、期待通りに動作している視覚的なフィードバックを得ることでした。非常に価値があります。

Answer 2

それはそれは高さ が必要なのdivで行うかのdivを削除し、

Answer 3

あなたのドロップ可能要素にid =「作品」ではなく、クラス=「作品」を持っているTDにIDやクラスを使用する必要があります。

は、あなたのドロップ可能な要素に

Answer 4

$(document).ready(function(){ 
    $('.piece').draggable(); 
    $('.field').droppable({ 
     drop: function(){ 
      alert($(this).attr('id')); 
     } 
    }); 
}); 

を#boardか#piecesを使用して試してみて、CSSにこれを追加します。

.field { 
    height:100%; 
} 

はチェス盤の正方形でdemo