Question

我想在容器内拖放一个元素。容器将具有子容器，其中可拖动的元件也可以被丢弃。虽然当我在子容器内拖动元素时，元素会被附加到主容器而不是子容器。

在蓝色div中拖动一个红色div，然后在刚刚附加到蓝色div的红色容器内拖动一个紫色div。

它反而附加到主容器而不是放在它上面的红色容器。

我怎么能将紫色div添加到蓝色div或红色div中，具体取决于你放弃它的div？

Answer 1

嵌套的droppables（贪婪在这里非常重要）：

/* drop on page canvas */
$("#drop").droppable({
    accept: ".inside-drag, .drag",
    drop: function (event, ui) {
        var target = $(event.target);
        var dropped = $(ui.draggable).clone().appendTo(target);
        if (dropped.hasClass('drag')) {
            dropped.droppable({
                accept: ".inside-drag",
                greedy: true,
                drop: function (event, ui) {
                    var target = $(event.target);
                    $(ui.draggable).clone().appendTo(target);
                },
            });
        }
    },
});

Demo

可放置子级中的jQuery UI

1 个答案: