jquery - 使用 jquery-ui 创建嵌套的拖放 div

Question

我想用 jquery-ui 拖放插件创建一个嵌套的 div。
我创建了这样的东西，但它不适用于child1和child2。
小提琴链接

我的代码是这样的：

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

Answer 1

它不起作用，因为在文档准备好时， $('.dest .parent') 和 $('.dest .parent .child1') 不匹配任何内容，因此不会为这些选择器初始化 droppables。

当 parent 放在 .dest 上时，您必须初始化 droppable （并且仅在创建的 .parent 元素上绑定 droppable ）

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

我编辑了你的小提琴：

你可以在这里看到完整的演示

编辑：

如果您想检查在 .child1 上放置时是否只有一个 .child2 存在，您可以将 .append() 放入 if/else 结构中，并使用 .find() 函数，结合长度（检索数量找到的元素）：

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