Изготовление перетаскивать элемент сбрасываемой в то же время перетаскиваемым

Question

Я пытался для того чтобы достигнуть функции следующим образом:

-вы можете перетащить несколько 450x150 на .drop_cont

-Тогда вы можете перетащить 300x150 на 450x150

Я пробовал добавлять и удалять классы, но он не работает. Есть ли способ сделать это, возможно, есть какой-то способ, о котором я не думал.

Демо: jsFiddle

Пример кода:

$(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

После того, как вы добавите класс, вам нужно вспомнить Droppable работать на новых элементах.

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