JQuery nesting drag/drop

Question

Existe-t-il un moyen d'imbriquer des drag/dropables en utilisant jquery ui, sans savoir à quelle profondeur imbriquer les divs ?

C'est ce que j'ai fait.

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;
    }
});

(Le code peut ne pas fonctionner, j'ai juste retiré les parties pertinentes de mon code)

Si je veux imbriquer les divs plus profondément, je dois ajouter un autre appel .droppable. C'est un problème car j'ai besoin que ce soit dynamique puisque je ne sais pas à quelle profondeur je devrai imbriquer.

Est-il possible de le faire sans savoir à quelle profondeur je veux imbriquer les divs ?

Existe-t-il un moyen de faire cela sans avoir à appeler .droppable({ }) en permanence ?

Answer 1

J'ai trouvé la solution, et voici comment j'ai fait.

$('.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');
});