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