Making dragged and dropped element droppable while still being draggable

Question

I have been trying to achive functionality as follows:

-you can drag and drop multiple 450x150 onto .drop_cont

-then you can drag and drop 300x150 onto 450x150

I tried adding and removing classes but it doesn't seem to work. Is there any way to do that, probably there is some way that I didn't think of.

Demo: jsFiddle

Sample Code:

$(document).ready(function () {
$( ".idg_row" ).draggable({
    helper: "clone",
    appendTo: "body",
    containment:"document",
    revert: true,
    stop: function( event, ui ) {
        check();
    }
});
$( ".idg_column" ).draggable({
    helper: "clone",
    appendTo: "body",
    containment:"document",
    revert: true,
    stop: function( event, ui ) {
        check();
    }
});
$( ".drop_cont" ).droppable({
    accept: ".idg_row",
    drop: function (event, ui) {
        ui.draggable.clone().appendTo($(this)).draggable();
    }
});
$( ".droppableC" ).droppable();
});

function check() {
  $('.drop_cont .idg_row').addClass('droppableC');
  $('.drop_cont .idg_column').addClass('droppableC');
}

Answer 1

Once you add the class, you need to recall droppable to run on the new elements.

function check() {
  $('.drop_cont .idg_row').addClass('droppableC');
  $('.drop_cont .idg_column').addClass('droppableC');
  $('.droppableC:not(.ui-droppable)' ).droppable();
}