Question

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

我的代码是这样的：

$(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'）不匹配任何内容，因此不会为这些选择器初始化droppable。

当父项被放在.dest上时，你必须初始化droppable（并且只在创建的.parent元素上绑定droppable）

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

我编辑了你的小提琴：

<强> You can see the full demo here

修改

如果要查看.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 }

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

1 个答案: