Detecting parent elements in drag and drop

Question

Hi Everyone,

I am writing a board game script and would like to use jQuery UI's drag and drop functionality. When i drag an element from inside DIV A to inside DIV B, is there a way of reading DIV B as the new container of the element.

$( ".draggable" ).draggable({
    stop: function() {
        alert(this.parentNode.id); // alerts DIV A's id
    }
});

Answer 1

alert($(this).closest('div').attr('id'))

Try this.

Answer 2

If you don't declare div b as droppable, you're actually not dropping div a inside div b. You are only changing the location of div a by moving it around.

Try this, declare div b as droppable.

 $("#b").droppable();
 $("#a").draggable();

$( "#b" ).droppable({
    drop: function( event, ui ) {
        alert($(this).attr("id"));
    }
});