Question

有没有办法使用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');
});

JQuery嵌套拖放

1 个答案: