Create Nested Drag and Drop divs with jquery-ui -

i want create nested div jquery-ui drag , drop plugin.
create not work child1 , child2.
fiddle link

my code this:

$(function () {     $('.parent,.child1,.child2').draggable({         revert: true     });     $('.dest').droppable({         accept: '.parent',         drop: function (event, ui) {             $('<div class="parent box"></div>').appendto(this);         }     });     $('.dest .parent').droppable({         accept: '.child1',         drop: function (event, ui) {             $('<div class="child1 box"></div>').appendto(this);         }     });     $('.dest .parent .child1').droppable({         accept: '.child2',         drop: function (event, ui) {             $('<div class="child2 box"></div>').appendto(this);         }     }); }); 

it doesn't work because on document ready, $('.dest .parent') , $('.dest .parent .child1') don't match anything, droppables not initialized selectors.

you have initialize droppable when parent dropped on .dest (and bind droppable on created .parent element)

$('.dest').droppable({     accept: '.parent',     drop: function (event, ui) {         $newelt = $('<div class="parent box"></div>');         $newelt.appendto(this);         $newelt.droppable({...});     } });   

i edited fiddle:

you can see full demo here

edit:

if want check if 1 .child2 exists when dropping on .child1, can put .append() inside if/else structure, , use .find() function, combined length (which retrieve number of element found):

if($(this).find('.child2').length < 1){ //check if number of existing .child2 in .child1 inferior 1     //do append here }