Create Nested Drag and Drop divs with jquery-ui

Question

I want to create a nested div with jquery-ui drag and drop plugin.
I create something like this but its not work for child1 and child2.
Fiddle Link

My code is like 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);
        }
    });
});

Robin Leboeuf · Accepted Answer · 2013-08-13 08:53:05Z

3

It doesn't work because on document ready, $('.dest .parent') and $('.dest .parent .child1') don't match anything, so droppables are not initialized for those selectors.

You have to initialize droppable when parent is dropped on .dest (and bind droppable only on the created .parent element)

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

I edited your fiddle:

You can see the full demo here

EDIT:

If you want to check if only one .child2 exists when dropping on .child1, you can put your .append() inside an if/else structure, and use the .find() function, combined to length (which retrieve the number of element found):

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

edited Aug 13, 2013 at 8:53

answered Aug 13, 2013 at 8:43

Robin Leboeuf

2,1261 gold badge13 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user495093 Over a year ago

thanks. one little question. how can I check that only one child2 exist inside child1?

Collectives™ on Stack Overflow

Create Nested Drag and Drop divs with jquery-ui

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related