Q:

Finding the dropped-on element

I'm making a chess board, and am trying to find the table element that the piece is dropped on. Unfortunately, the drop event doesn't seem to be firing at all. 
https://jsfiddle.net/thwee3/hhxt84k1/
$('.piece').draggable();
$('.pieces').droppable({
  drop: function(){
    alert($(this).attr('id')); // should give me the number of the field
  }
});

This is what I have so far, can someone tell me why the drop event isn't firing? 

A:

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

and add this to css : 
.field {
    height:100%;
}

see demo

A:

The div elements in the chess board squares will be zero height. So when you drop on the squares you hit the td elements - not the tiny divs.
Try adding CSS 
.tile {
    height: 100%;
}

and add class tile to your divs so they become
<td><div id="0" class="field"></div class="tile"></td>

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

The error you made was to assume the div elements would fill their parent. You are in good company in that. A top tip I read about debugging divs was to apply a background colour to the div so you get visual feedback that it is behaving as you expect - can be very worthwhile.

