JQuery вложенности перетаскивания

Question

Есть ли способ вкладывать drag / dropables с помощью jquery ui, не зная, как глубоко вложить div?

Это то, чем я занимаюсь.

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

(код может не работать, я просто извлек соответствующие части из своего кода)

Если я хочу глубже вложить div, мне нужно добавить еще один вызов .droppable, это проблема, потому что мне нужно, чтобы это было динамическим, поскольку я не знаю, насколько глубоко мне нужно будет вложить.

Можно ли сделать это, не зная, насколько глубоко я хочу вложить div?

Есть ли способ сделать это без необходимости постоянно вызывать .droppable ({})?

Answer 1

Я понял это, и вот как я это сделал.

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