JQuery nesting drag/drop

Question

Is there a way to nest drag/dropables using jquery ui, without knowing how deep to nest the divs?

This is what I have been doing.

someElement
.droppable({
    greedy: true,
    accept: '.Content1',
    drop: function(event, ui) {
        $(ui.draggable).hide('explode', 1000);
        $(this).append(ui.draggable);
        ui.draggable
        .removeClass('Content1')
        .addClass('Content2')
        .css({ 'left': 0, 'top': 0 })
        .show('slide', 1000)
        .draggable('option', 'containment', '#' + $(this).attr('id'))
        .droppable({
            greedy: true,
            accept: '.Content2',
            drop: function(event, ui) {
                $(ui.draggable).hide('explode', 1000);
                $(this).append(ui.draggable);
                ui.draggable
                .removeClass('Content2')
                .addClass('Content3')
                .css({ 'left': 0, 'top': 0 })
                .show('slide', 1000)
                .draggable('option', 'containment', '#' + $(this).attr('id'));
                return false;
            }
        });
        return false;
    }
});

(The code might not run, I just pulled out the relevant parts from my code)

If I want to nest the divs deeper I need to add another .droppable call, this is a problem because I need this to be dynamic since I do not know how deep I will need to nest.

Is it possible to do this without knowing how deep I want to nest divs?

Is there a way to do this without having to call .droppable({ }) all the time?

Answer 1

I figured it out, and here is how I did it.

$('.drop').livequery('drop', function(event, ui) {
    var obj = currentObj;
    var dropingClass, newClass;
    dropingClass = ui.draggable.attr('class').toString().split(' ');
    for (var i = 0; i < dropingClass.length; i++) {
        if (dropingClass[i].match(/^Content([0-9]+)$/)) {
            dropingClass = dropingClass[i].toString();
        } else { continue; }
    }
    newClass = dropingClass.charAt(dropingClass.length - 1);
    newClass++;
    Configurator.WorkspaceFunctions.ChangeObjectParent(ui.draggable.attr('id'), $(this).attr('id'), FAIL);
    var divToAppend = ui.draggable;
    $(ui.draggable).hide('explode', 1000);
    $(this).append(divToAppend);
    divToAppend
        .removeClass(dropingClass)
        .addClass('Content' + newClass)
        .css({ 'left': 0, 'top': 0 })
        .width(obj.Width)
        .height(obj.Height)
        .show('slide', 1000)
        .droppable('option', 'greedy', true)
        .droppable('option', 'accept', '.Content' + newClass)
        .draggable('option', 'containment', '#' + $(this).attr('id'));
    return false;
}, function(event, ui) {
    $(this).unbind('drop');
});