Take the 2-minute tour ×

I'm new to jQuery. I have implemented a drag and drop scenario. My question is if jQuery automatically modifies the internal DOM after a succesfull drag and drop action is performed.

This is my scenario. Initially my dropable element #droppableContainer is empty. But after I dropped some elements into it, the droppable element is still empty!!!

Below is some test code I wrote to iterate through all children elements of my droppable:

$('#droppableContainer').children().each(function(item) {


The above test code is executed separately, after all draggable and droppable events, but nothing gets printed.

Thanks in advance!!!

share|improve this question
How do you ensure the code you posted, that iterates over the droppable children, is run only after all the drag-drop actions have finished executing? –  Bogdan Jul 26 '12 at 21:07
add comment

1 Answer

up vote 0 down vote accepted

You should access the droppable container in the drop event of the droppable element:

$(function() {
    $( "#droppableContainer" ).droppable({
        drop: function( event, ui ) {
            console.log($(this)); // $(this) being the #droppableContainer
share|improve this answer
add comment

Your Answer


